@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/EmptyState/empty-state.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$empty-state}) {
4
- --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
5
- --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
6
- --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);
7
- --#{$empty-state}--PaddingLeft: var(--pf-t--global--spacer--xl);
8
- --#{$empty-state}--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
9
- --#{$empty-state}--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
10
- --#{$empty-state}--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
11
- --#{$empty-state}--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
4
+ --#{$empty-state}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
5
+ --#{$empty-state}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
6
+ --#{$empty-state}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
7
+ --#{$empty-state}--PaddingInlineStart: var(--pf-t--global--spacer--xl);
8
+ --#{$empty-state}--m-xs--PaddingBlockStart: var(--pf-t--global--spacer--md);
9
+ --#{$empty-state}--m-xs--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10
+ --#{$empty-state}--m-xs--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11
+ --#{$empty-state}--m-xs--PaddingInlineStart: var(--pf-t--global--spacer--md);
12
12
 
13
13
  // Content
14
14
  --#{$empty-state}__content--MaxWidth: none;
@@ -17,11 +17,11 @@
17
17
  --#{$empty-state}--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
18
18
 
19
19
  // Icon
20
- --#{$empty-state}__icon--MarginBottom: var(--pf-t--global--spacer--lg);
20
+ --#{$empty-state}__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
21
21
  --#{$empty-state}__icon--FontSize: var(--pf-t--global--icon--size--2xl);
22
22
  --#{$empty-state}__icon--Color: var(--pf-t--global--icon--color--subtle);
23
- --#{$empty-state}--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
24
- --#{$empty-state}--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
23
+ --#{$empty-state}--m-xs__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
24
+ --#{$empty-state}--m-xl__icon--MarginBlockEnd: var(--pf-t--global--spacer--xl);
25
25
  --#{$empty-state}--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
26
26
 
27
27
  // Status variant icon color
@@ -41,18 +41,18 @@
41
41
  --#{$empty-state}--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
42
42
 
43
43
  // Body
44
- --#{$empty-state}__body--MarginTop: var(--pf-t--global--spacer--md);
44
+ --#{$empty-state}__body--MarginBlockStart: var(--pf-t--global--spacer--md);
45
45
  --#{$empty-state}__body--Color: var(--pf-t--global--text--color--subtle);
46
46
  --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
47
47
  --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
48
- --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
48
+ --#{$empty-state}--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
49
49
  --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
50
- --#{$empty-state}--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
50
+ --#{$empty-state}--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
51
51
 
52
52
  // Footer
53
53
  --#{$empty-state}__footer--RowGap: var(--pf-t--global--spacer--sm);
54
- --#{$empty-state}__footer--MarginTop: var(--pf-t--global--spacer--xl);
55
- --#{$empty-state}--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
54
+ --#{$empty-state}__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
55
+ --#{$empty-state}--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
56
56
 
57
57
  // Actions
58
58
  --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);
@@ -63,23 +63,23 @@
63
63
  display: flex;
64
64
  align-items: center;
65
65
  justify-content: center;
66
- padding-block-start: var(--#{$empty-state}--PaddingTop);
67
- padding-block-end: var(--#{$empty-state}--PaddingBottom);
68
- padding-inline-start: var(--#{$empty-state}--PaddingLeft);
69
- padding-inline-end: var(--#{$empty-state}--PaddingRight);
66
+ padding-block-start: var(--#{$empty-state}--PaddingBlockStart);
67
+ padding-block-end: var(--#{$empty-state}--PaddingBlockEnd);
68
+ padding-inline-start: var(--#{$empty-state}--PaddingInlineStart);
69
+ padding-inline-end: var(--#{$empty-state}--PaddingInlineEnd);
70
70
  text-align: center;
71
71
 
72
72
  &.pf-m-xs {
73
- --#{$empty-state}--PaddingTop: var(--#{$empty-state}--m-xs--PaddingTop);
74
- --#{$empty-state}--PaddingRight: var(--#{$empty-state}--m-xs--PaddingRight);
75
- --#{$empty-state}--PaddingBottom: var(--#{$empty-state}--m-xs--PaddingBottom);
76
- --#{$empty-state}--PaddingLeft: var(--#{$empty-state}--m-xs--PaddingLeft);
73
+ --#{$empty-state}--PaddingBlockStart: var(--#{$empty-state}--m-xs--PaddingBlockStart);
74
+ --#{$empty-state}--PaddingInlineEnd: var(--#{$empty-state}--m-xs--PaddingInlineEnd);
75
+ --#{$empty-state}--PaddingBlockEnd: var(--#{$empty-state}--m-xs--PaddingBlockEnd);
76
+ --#{$empty-state}--PaddingInlineStart: var(--#{$empty-state}--m-xs--PaddingInlineStart);
77
77
  --#{$empty-state}__title-text--FontSize: var(--#{$empty-state}--m-xs__title-text--FontSize);
78
78
  --#{$empty-state}__content--MaxWidth: var(--#{$empty-state}--m-xs__content--MaxWidth);
79
- --#{$empty-state}__icon--MarginBottom: var(--#{$empty-state}--m-xs__icon--MarginBottom);
80
- --#{$empty-state}__body--MarginTop: var(--#{$empty-state}--m-xs__body--MarginTop);
79
+ --#{$empty-state}__icon--MarginBlockEnd: var(--#{$empty-state}--m-xs__icon--MarginBlockEnd);
80
+ --#{$empty-state}__body--MarginBlockStart: var(--#{$empty-state}--m-xs__body--MarginBlockStart);
81
81
  --#{$empty-state}--body--FontSize: var(--#{$empty-state}--m-xs__body--FontSize);
82
- --#{$empty-state}__footer--MarginTop: var(--#{$empty-state}--m-xs__footer--MarginTop);
82
+ --#{$empty-state}__footer--MarginBlockStart: var(--#{$empty-state}--m-xs__footer--MarginBlockStart);
83
83
  }
84
84
 
85
85
  &.pf-m-sm {
@@ -91,9 +91,9 @@
91
91
  }
92
92
 
93
93
  &.pf-m-xl {
94
- --#{$empty-state}__body--MarginTop: var(--#{$empty-state}--m-xl__body--MarginTop);
94
+ --#{$empty-state}__body--MarginBlockStart: var(--#{$empty-state}--m-xl__body--MarginBlockStart);
95
95
  --#{$empty-state}--body--FontSize: var(--#{$empty-state}--m-xl__body--FontSize);
96
- --#{$empty-state}__icon--MarginBottom: var(--#{$empty-state}--m-xl__icon--MarginBottom);
96
+ --#{$empty-state}__icon--MarginBlockEnd: var(--#{$empty-state}--m-xl__icon--MarginBlockEnd);
97
97
  --#{$empty-state}__icon--FontSize: var(--#{$empty-state}--m-xl__icon--FontSize);
98
98
  --#{$empty-state}__title-text--FontSize: var(--#{$empty-state}--m-xl__title-text--FontSize);
99
99
  --#{$empty-state}__title-text--LineHeight: var(--#{$empty-state}--m-xl__title-text--LineHeight);
@@ -129,7 +129,7 @@
129
129
  }
130
130
 
131
131
  .#{$empty-state}__icon {
132
- margin-block-end: var(--#{$empty-state}__icon--MarginBottom);
132
+ margin-block-end: var(--#{$empty-state}__icon--MarginBlockEnd);
133
133
  font-size: var(--#{$empty-state}__icon--FontSize);
134
134
  line-height: 1;
135
135
  color: var(--#{$empty-state}__icon--Color);
@@ -143,7 +143,7 @@
143
143
  }
144
144
 
145
145
  .#{$empty-state}__body {
146
- margin-block-start: var(--#{$empty-state}__body--MarginTop);
146
+ margin-block-start: var(--#{$empty-state}__body--MarginBlockStart);
147
147
  font-size: var(--#{$empty-state}--body--FontSize);
148
148
  color: var(--#{$empty-state}__body--Color);
149
149
  }
@@ -153,7 +153,7 @@
153
153
  flex-direction: column;
154
154
  row-gap: var(--#{$empty-state}__footer--RowGap);
155
155
  align-items: center;
156
- margin-block-start: var(--#{$empty-state}__footer--MarginTop);
156
+ margin-block-start: var(--#{$empty-state}__footer--MarginBlockStart);
157
157
  }
158
158
 
159
159
  .#{$empty-state}__actions {
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,8 +1,8 @@
1
1
  :where(:root, .pf-v6-c-expandable-section) {
2
- --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
2
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
6
  --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
7
7
  --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
8
8
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -15,36 +15,36 @@
15
15
  --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
16
  --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
17
17
  --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
18
- --pf-v6-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
19
- --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
20
- --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
21
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22
22
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
23
23
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
24
24
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25
25
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
26
26
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
27
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
29
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
30
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
27
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
28
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
30
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
31
  --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
32
32
  --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
33
33
  --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
34
34
  --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
35
35
  --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
36
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
38
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
36
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
38
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
39
39
  --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
40
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
41
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section__toggle--PaddingLeft));
42
- --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft));
43
- --pf-v6-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
44
- --pf-v6-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
45
- --pf-v6-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
46
- --pf-v6-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
47
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
40
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
41
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart));
42
+ --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart));
43
+ --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
44
+ --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
+ --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
46
+ --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
47
+ --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
48
48
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
49
49
  }
50
50
 
@@ -59,35 +59,35 @@
59
59
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
60
60
  }
61
61
  .pf-v6-c-expandable-section.pf-m-display-lg {
62
- --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop);
63
- --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight);
64
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom);
65
- --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft);
62
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
63
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
64
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
65
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
66
66
  --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
67
67
  --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
68
68
  --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
69
69
  --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
70
70
  --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
71
- --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingRight);
72
- --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom);
73
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft);
74
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
71
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
72
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
73
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
74
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
75
75
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
76
76
  border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
77
77
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
78
78
  }
79
79
  .pf-v6-c-expandable-section.pf-m-indented {
80
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft);
80
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
81
81
  }
82
82
  .pf-v6-c-expandable-section.pf-m-truncate {
83
- --pf-v6-c-expandable-section__toggle--PaddingTop: 0;
84
- --pf-v6-c-expandable-section__toggle--PaddingRight: 0;
85
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom);
86
- --pf-v6-c-expandable-section__toggle--PaddingLeft: 0;
87
- --pf-v6-c-expandable-section__content--PaddingTop: 0;
88
- --pf-v6-c-expandable-section__content--PaddingRight: 0;
89
- --pf-v6-c-expandable-section__content--PaddingBottom: 0;
90
- --pf-v6-c-expandable-section__content--PaddingLeft: 0;
83
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
84
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
85
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
86
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
87
+ --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
88
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
89
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
90
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
91
91
  }
92
92
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
93
93
  display: -webkit-box;
@@ -100,10 +100,10 @@
100
100
  display: flex;
101
101
  column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
102
102
  width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
103
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingTop);
104
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBottom);
105
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingLeft);
106
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingRight);
103
+ padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
104
+ padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
105
+ padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
106
+ padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
107
107
  background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
108
108
  border: none;
109
109
  border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
@@ -133,8 +133,8 @@
133
133
 
134
134
  .pf-v6-c-expandable-section__content {
135
135
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
136
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingTop);
137
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBottom);
138
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingLeft);
139
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingRight);
136
+ padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
137
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
138
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
139
+ padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
140
140
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  :where(:root, .#{$expandable-section}) {
4
4
  // Toggle
5
- --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
6
- --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
7
- --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
8
- --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
5
+ --#{$expandable-section}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
+ --#{$expandable-section}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
7
+ --#{$expandable-section}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8
+ --#{$expandable-section}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9
9
  --#{$expandable-section}__toggle--BackgroundColor: transparent;
10
10
  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
11
11
 
@@ -24,10 +24,10 @@
24
24
  --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
25
25
 
26
26
  // Content
27
- --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
28
- --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
29
- --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
30
- --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
27
+ --#{$expandable-section}__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28
+ --#{$expandable-section}__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
29
+ --#{$expandable-section}__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
+ --#{$expandable-section}__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31
31
  --#{$expandable-section}__content--MaxWidth: auto;
32
32
 
33
33
  // Limit Width
@@ -37,31 +37,31 @@
37
37
  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
38
38
  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
39
39
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
40
- --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
41
- --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
42
- --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
43
- --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
40
+ --#{$expandable-section}--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
41
+ --#{$expandable-section}--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
42
+ --#{$expandable-section}--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
43
+ --#{$expandable-section}--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
44
44
  --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
45
45
  --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
46
46
  --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
47
47
  --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
48
48
  --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
49
- --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
50
- --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
51
- --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
49
+ --#{$expandable-section}--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
50
+ --#{$expandable-section}--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
51
+ --#{$expandable-section}--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
52
52
  --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
53
53
 
54
54
  // Indented
55
- --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
56
- --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
57
- --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
55
+ --#{$expandable-section}--m-indented__content--PaddingInlineStart--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
56
+ --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--#{$expandable-section}--m-indented__content--PaddingInlineStart--base) + var(--#{$expandable-section}__toggle--PaddingInlineStart));
57
+ --#{$expandable-section}--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--#{$expandable-section}--m-indented__content--PaddingInlineStart--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingInlineStart));
58
58
 
59
59
  // Truncate
60
- --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
61
- --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
62
- --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
63
- --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
64
- --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
60
+ --#{$expandable-section}--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
61
+ --#{$expandable-section}--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
+ --#{$expandable-section}--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
63
+ --#{$expandable-section}--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
64
+ --#{$expandable-section}--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
65
65
  --#{$expandable-section}--m-truncate__content--LineClamp: 3;
66
66
  }
67
67
 
@@ -79,19 +79,19 @@
79
79
  }
80
80
 
81
81
  &.pf-m-display-lg {
82
- --#{$expandable-section}__toggle--PaddingTop: var(--#{$expandable-section}--m-display-lg__toggle--PaddingTop);
83
- --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
84
- --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
85
- --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
82
+ --#{$expandable-section}__toggle--PaddingBlockStart: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBlockStart);
83
+ --#{$expandable-section}__toggle--PaddingInlineEnd: var(--#{$expandable-section}--m-display-lg__toggle--PaddingInlineEnd);
84
+ --#{$expandable-section}__toggle--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBlockEnd);
85
+ --#{$expandable-section}__toggle--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg__toggle--PaddingInlineStart);
86
86
  --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
87
87
  --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
88
88
  --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
89
89
  --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
90
90
  --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
91
- --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
92
- --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
93
- --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
94
- --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
91
+ --#{$expandable-section}__content--PaddingInlineEnd: var(--#{$expandable-section}--m-display-lg__content--PaddingInlineEnd);
92
+ --#{$expandable-section}__content--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg__content--PaddingBlockEnd);
93
+ --#{$expandable-section}__content--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg__content--PaddingInlineStart);
94
+ --#{$expandable-section}--m-indented__content--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingInlineStart);
95
95
 
96
96
  background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
97
97
  border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
@@ -99,18 +99,18 @@
99
99
  }
100
100
 
101
101
  &.pf-m-indented {
102
- --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-indented__content--PaddingLeft);
102
+ --#{$expandable-section}__content--PaddingInlineStart: var(--#{$expandable-section}--m-indented__content--PaddingInlineStart);
103
103
  }
104
104
 
105
105
  &.pf-m-truncate {
106
- --#{$expandable-section}__toggle--PaddingTop: 0;
107
- --#{$expandable-section}__toggle--PaddingRight: 0;
108
- --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
109
- --#{$expandable-section}__toggle--PaddingLeft: 0;
110
- --#{$expandable-section}__content--PaddingTop: 0;
111
- --#{$expandable-section}__content--PaddingRight: 0;
112
- --#{$expandable-section}__content--PaddingBottom: 0;
113
- --#{$expandable-section}__content--PaddingLeft: 0;
106
+ --#{$expandable-section}__toggle--PaddingBlockStart: 0;
107
+ --#{$expandable-section}__toggle--PaddingInlineEnd: 0;
108
+ --#{$expandable-section}__toggle--PaddingBlockEnd: var(--#{$expandable-section}--m-truncate__toggle--PaddingBlockEnd);
109
+ --#{$expandable-section}__toggle--PaddingInlineStart: 0;
110
+ --#{$expandable-section}__content--PaddingBlockStart: 0;
111
+ --#{$expandable-section}__content--PaddingInlineEnd: 0;
112
+ --#{$expandable-section}__content--PaddingBlockEnd: 0;
113
+ --#{$expandable-section}__content--PaddingInlineStart: 0;
114
114
 
115
115
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
116
116
  // stylelint-disable
@@ -127,10 +127,10 @@
127
127
  display: flex;
128
128
  column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
129
129
  width: var(--#{$expandable-section}__toggle--Width, initial);
130
- padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
131
- padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
132
- padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
133
- padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
130
+ padding-block-start: var(--#{$expandable-section}__toggle--PaddingBlockStart);
131
+ padding-block-end: var(--#{$expandable-section}__toggle--PaddingBlockEnd);
132
+ padding-inline-start: var(--#{$expandable-section}__toggle--PaddingInlineStart);
133
+ padding-inline-end: var(--#{$expandable-section}__toggle--PaddingInlineEnd);
134
134
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
135
135
  border: none;
136
136
  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
@@ -160,8 +160,8 @@
160
160
 
161
161
  .#{$expandable-section}__content {
162
162
  max-width: var(--#{$expandable-section}__content--MaxWidth);
163
- padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
164
- padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
165
- padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
166
- padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
163
+ padding-block-start: var(--#{$expandable-section}__content--PaddingBlockStart);
164
+ padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd);
165
+ padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart);
166
+ padding-inline-end: var(--#{$expandable-section}__content--PaddingInlineEnd);
167
167
  }