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

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 (175) hide show
  1. package/base/patternfly-variables.css +9 -22
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +4 -5
  7. package/base/tokens/tokens-default.scss +10 -11
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/AboutModalBox/about-modal-box.css +54 -54
  11. package/components/AboutModalBox/about-modal-box.scss +54 -54
  12. package/components/Accordion/accordion.css +39 -39
  13. package/components/Accordion/accordion.scss +39 -39
  14. package/components/Alert/alert-group.css +15 -15
  15. package/components/Alert/alert-group.scss +15 -15
  16. package/components/Alert/alert.css +46 -46
  17. package/components/Alert/alert.scss +46 -46
  18. package/components/AppLauncher/app-launcher.css +58 -58
  19. package/components/AppLauncher/app-launcher.scss +58 -58
  20. package/components/BackToTop/back-to-top.css +14 -14
  21. package/components/BackToTop/back-to-top.scss +14 -14
  22. package/components/Badge/badge.css +6 -6
  23. package/components/Badge/badge.scss +6 -6
  24. package/components/Banner/banner.css +12 -12
  25. package/components/Banner/banner.scss +12 -12
  26. package/components/Breadcrumb/breadcrumb.css +12 -12
  27. package/components/Breadcrumb/breadcrumb.scss +12 -12
  28. package/components/Button/button.css +93 -93
  29. package/components/Button/button.scss +93 -93
  30. package/components/CalendarMonth/calendar-month.css +42 -42
  31. package/components/CalendarMonth/calendar-month.scss +42 -42
  32. package/components/Card/card.css +59 -59
  33. package/components/Card/card.scss +59 -59
  34. package/components/Check/check.css +2 -2
  35. package/components/Check/check.scss +2 -2
  36. package/components/Chip/chip-group.css +20 -20
  37. package/components/Chip/chip-group.scss +20 -20
  38. package/components/Chip/chip.css +26 -26
  39. package/components/Chip/chip.scss +26 -26
  40. package/components/ClipboardCopy/clipboard-copy.css +36 -36
  41. package/components/ClipboardCopy/clipboard-copy.scss +36 -36
  42. package/components/CodeBlock/code-block.css +19 -19
  43. package/components/CodeBlock/code-block.scss +19 -19
  44. package/components/CodeEditor/code-editor.css +33 -33
  45. package/components/CodeEditor/code-editor.scss +33 -33
  46. package/components/Content/content.css +65 -65
  47. package/components/Content/content.scss +65 -65
  48. package/components/ContextSelector/context-selector.css +145 -145
  49. package/components/ContextSelector/context-selector.scss +145 -145
  50. package/components/DataList/data-list-grid.css +98 -98
  51. package/components/DataList/data-list-grid.scss +14 -14
  52. package/components/DataList/data-list.css +233 -233
  53. package/components/DataList/data-list.scss +135 -135
  54. package/components/DatePicker/date-picker.css +14 -14
  55. package/components/DatePicker/date-picker.scss +14 -14
  56. package/components/DescriptionList/description-list.css +6 -6
  57. package/components/DescriptionList/description-list.scss +6 -6
  58. package/components/Drawer/drawer.css +84 -84
  59. package/components/Drawer/drawer.scss +84 -84
  60. package/components/Dropdown/dropdown.css +126 -126
  61. package/components/Dropdown/dropdown.scss +126 -126
  62. package/components/DualListSelector/dual-list-selector.css +59 -58
  63. package/components/DualListSelector/dual-list-selector.scss +41 -40
  64. package/components/EmptyState/empty-state.css +32 -32
  65. package/components/EmptyState/empty-state.scss +32 -32
  66. package/components/ExpandableSection/expandable-section.css +48 -48
  67. package/components/ExpandableSection/expandable-section.scss +48 -48
  68. package/components/Form/form.css +106 -106
  69. package/components/Form/form.scss +88 -88
  70. package/components/FormControl/form-control.css +44 -44
  71. package/components/FormControl/form-control.scss +44 -44
  72. package/components/HelperText/helper-text.css +2 -2
  73. package/components/HelperText/helper-text.scss +2 -2
  74. package/components/Hint/hint.css +16 -16
  75. package/components/Hint/hint.scss +16 -16
  76. package/components/InlineEdit/inline-edit.css +10 -10
  77. package/components/InlineEdit/inline-edit.scss +10 -10
  78. package/components/InputGroup/input-group.css +16 -16
  79. package/components/InputGroup/input-group.scss +16 -16
  80. package/components/JumpLinks/jump-links.css +75 -75
  81. package/components/JumpLinks/jump-links.scss +75 -75
  82. package/components/Label/label-group.css +26 -26
  83. package/components/Label/label-group.scss +26 -26
  84. package/components/Label/label.css +30 -30
  85. package/components/Label/label.scss +30 -30
  86. package/components/List/list.css +27 -27
  87. package/components/List/list.scss +27 -27
  88. package/components/LogViewer/log-viewer.css +36 -36
  89. package/components/LogViewer/log-viewer.scss +37 -37
  90. package/components/Login/login.css +88 -88
  91. package/components/Login/login.scss +88 -88
  92. package/components/Menu/menu.css +20 -20
  93. package/components/Menu/menu.scss +20 -20
  94. package/components/MenuToggle/menu-toggle.css +58 -58
  95. package/components/MenuToggle/menu-toggle.scss +58 -58
  96. package/components/ModalBox/modal-box.css +39 -39
  97. package/components/ModalBox/modal-box.scss +39 -39
  98. package/components/MultipleFileUpload/multiple-file-upload.css +32 -32
  99. package/components/MultipleFileUpload/multiple-file-upload.scss +32 -32
  100. package/components/NotificationBadge/notification-badge.css +16 -16
  101. package/components/NotificationBadge/notification-badge.scss +16 -16
  102. package/components/NotificationDrawer/notification-drawer.css +41 -41
  103. package/components/NotificationDrawer/notification-drawer.scss +41 -41
  104. package/components/NumberInput/number-input.css +2 -2
  105. package/components/NumberInput/number-input.scss +2 -2
  106. package/components/OptionsMenu/options-menu.css +79 -79
  107. package/components/OptionsMenu/options-menu.scss +79 -79
  108. package/components/Page/page.css +181 -181
  109. package/components/Page/page.scss +131 -131
  110. package/components/Pagination/pagination.css +24 -24
  111. package/components/Pagination/pagination.scss +24 -24
  112. package/components/Panel/panel.css +24 -24
  113. package/components/Panel/panel.scss +24 -24
  114. package/components/Popover/popover.css +48 -48
  115. package/components/Popover/popover.scss +48 -48
  116. package/components/Progress/progress.css +4 -4
  117. package/components/Progress/progress.scss +4 -4
  118. package/components/ProgressStepper/progress-stepper.css +225 -225
  119. package/components/ProgressStepper/progress-stepper.scss +93 -93
  120. package/components/Radio/radio.css +6 -6
  121. package/components/Radio/radio.scss +6 -6
  122. package/components/Select/select.css +171 -171
  123. package/components/Select/select.scss +171 -171
  124. package/components/Sidebar/sidebar.css +44 -44
  125. package/components/Sidebar/sidebar.scss +44 -44
  126. package/components/SimpleList/simple-list.css +18 -18
  127. package/components/SimpleList/simple-list.scss +18 -18
  128. package/components/Skeleton/skeleton.css +4 -4
  129. package/components/Skeleton/skeleton.scss +4 -4
  130. package/components/SkipToContent/skip-to-content.css +4 -4
  131. package/components/SkipToContent/skip-to-content.scss +4 -4
  132. package/components/Slider/slider.css +25 -25
  133. package/components/Slider/slider.scss +25 -25
  134. package/components/Switch/switch.css +4 -4
  135. package/components/Switch/switch.scss +4 -4
  136. package/components/TabContent/tab-content.css +24 -24
  137. package/components/TabContent/tab-content.scss +24 -24
  138. package/components/Table/table-grid.css +404 -404
  139. package/components/Table/table-grid.scss +116 -116
  140. package/components/Table/table-scrollable.css +16 -16
  141. package/components/Table/table-scrollable.scss +16 -16
  142. package/components/Table/table-tree-view.css +251 -251
  143. package/components/Table/table-tree-view.scss +59 -59
  144. package/components/Table/table.css +122 -122
  145. package/components/Table/table.scss +122 -122
  146. package/components/Tabs/tabs.css +118 -118
  147. package/components/Tabs/tabs.scss +118 -118
  148. package/components/TextInputGroup/text-input-group.css +26 -26
  149. package/components/TextInputGroup/text-input-group.scss +26 -26
  150. package/components/Tile/tile.css +13 -13
  151. package/components/Tile/tile.scss +13 -13
  152. package/components/ToggleGroup/toggle-group.css +28 -28
  153. package/components/ToggleGroup/toggle-group.scss +28 -28
  154. package/components/Tooltip/tooltip.css +26 -26
  155. package/components/Tooltip/tooltip.scss +26 -26
  156. package/components/TreeView/tree-view.css +181 -181
  157. package/components/TreeView/tree-view.scss +122 -122
  158. package/components/Wizard/wizard.css +158 -119
  159. package/components/Wizard/wizard.scss +176 -126
  160. package/components/_index.css +4310 -4270
  161. package/docs/components/Drawer/examples/Drawer.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +39 -39
  163. package/docs/components/Table/examples/Table.md +20 -20
  164. package/docs/components/Wizard/examples/Wizard.md +827 -91
  165. package/docs/demos/Card/examples/Card.css +2 -2
  166. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -44
  167. package/docs/demos/Table/examples/Table.md +20 -20
  168. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  169. package/package.json +1 -1
  170. package/patternfly-base-no-globals.css +9 -22
  171. package/patternfly-base.css +9 -22
  172. package/patternfly-no-globals.css +4319 -4292
  173. package/patternfly.css +4319 -4292
  174. package/patternfly.min.css +1 -1
  175. package/patternfly.min.css.map +1 -1
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -10,11 +10,11 @@
10
10
  --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
11
11
  --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
12
12
  --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
13
- --pf-v6-c-dual-list-selector__header--MarginBottom: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-dual-list-selector__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
14
14
  --pf-v6-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
15
15
  --pf-v6-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
16
- --pf-v6-c-dual-list-selector__tools--MarginBottom: var(--pf-t--global--spacer--md);
17
- --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
16
+ --pf-v6-c-dual-list-selector__tools--MarginBlockEnd: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
18
18
  --pf-v6-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
19
19
  --pf-v6-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
20
20
  --pf-v6-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -27,28 +27,29 @@
27
27
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
28
28
  --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
29
29
  --pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
30
- --pf-v6-c-dual-list-selector__item--PaddingTop: var(--pf-t--global--spacer--sm);
31
- --pf-v6-c-dual-list-selector__item--PaddingRight: var(--pf-t--global--spacer--md);
32
- --pf-v6-c-dual-list-selector__item--PaddingBottom: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-dual-list-selector__item--PaddingLeft: var(--pf-t--global--spacer--md);
34
- --pf-v6-c-dual-list-selector__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
30
+ --pf-v6-c-dual-list-selector__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-dual-list-selector__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
32
+ --pf-v6-c-dual-list-selector__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
34
+ --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
35
35
  --pf-v6-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v6-c-dual-list-selector__list-item-row--FontSize));
36
36
  --pf-v6-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v6-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
37
- --pf-v6-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
37
+ --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart: var(--pf-t--global--spacer--xs);
38
38
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
39
39
  --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
40
40
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
41
- --pf-v6-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
41
+ --pf-v6-c-dual-list-selector__status--MarginBlockEnd: var(--pf-t--global--spacer--sm);
42
42
  --pf-v6-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
43
43
  --pf-v6-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
44
- --pf-v6-c-dual-list-selector__controls--PaddingRight: var(--pf-t--global--spacer--md);
45
- --pf-v6-c-dual-list-selector__controls--PaddingLeft: var(--pf-t--global--spacer--md);
44
+ --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
+ --pf-v6-c-dual-list-selector__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
46
46
  --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
47
47
  --pf-v6-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
48
- --pf-v6-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
49
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: 0;
48
+ --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: 0;
50
50
  --pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
51
- --pf-v6-c-dual-list-selector__item-check--MarginRight: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-dual-list-selector__item-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
52
+ --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
52
53
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
53
54
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
54
55
  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
@@ -76,7 +77,7 @@
76
77
 
77
78
  .pf-v6-c-dual-list-selector__header {
78
79
  grid-area: var(--pf-v6-c-dual-list-selector__header--GridArea);
79
- margin-block-end: var(--pf-v6-c-dual-list-selector__header--MarginBottom);
80
+ margin-block-end: var(--pf-v6-c-dual-list-selector__header--MarginBlockEnd);
80
81
  }
81
82
 
82
83
  .pf-v6-c-dual-list-selector__title-text {
@@ -87,7 +88,7 @@
87
88
  .pf-v6-c-dual-list-selector__tools {
88
89
  display: flex;
89
90
  grid-area: var(--pf-v6-c-dual-list-selector__tools--GridArea);
90
- margin-block-end: var(--pf-v6-c-dual-list-selector__tools--MarginBottom);
91
+ margin-block-end: var(--pf-v6-c-dual-list-selector__tools--MarginBlockEnd);
91
92
  }
92
93
 
93
94
  .pf-v6-c-dual-list-selector__tools-filter {
@@ -98,13 +99,13 @@
98
99
  display: flex;
99
100
  }
100
101
  .pf-v6-c-dual-list-selector__tools-filter ~ .pf-v6-c-dual-list-selector__tools-actions {
101
- margin-inline-start: var(--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginLeft);
102
+ margin-inline-start: var(--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart);
102
103
  }
103
104
 
104
105
  .pf-v6-c-dual-list-selector__status {
105
106
  display: flex;
106
107
  grid-area: var(--pf-v6-c-dual-list-selector__status--GridArea);
107
- margin-block-end: var(--pf-v6-c-dual-list-selector__status--MarginBottom);
108
+ margin-block-end: var(--pf-v6-c-dual-list-selector__status--MarginBlockEnd);
108
109
  }
109
110
 
110
111
  .pf-v6-c-dual-list-selector__status-text {
@@ -129,13 +130,13 @@
129
130
  flex-direction: column;
130
131
  }
131
132
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
132
- --pf-v6-c-dual-list-selector__item-toggle--MarginTop: 0;
133
- --pf-v6-c-dual-list-selector__item-toggle--MarginBottom: 0;
133
+ --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
134
+ --pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd: 0;
134
135
  }
135
136
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
136
137
  transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
137
138
  position: absolute;
138
- inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--Left);
139
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
139
140
  }
140
141
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
141
142
  transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
@@ -149,7 +150,7 @@
149
150
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
150
151
  }
151
152
  .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
152
- --pf-v6-c-dual-list-selector__item--PaddingLeft: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingLeft);
153
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
153
154
  }
154
155
  .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
155
156
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
@@ -197,7 +198,7 @@
197
198
  display: flex;
198
199
  }
199
200
  .pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item {
200
- --pf-v6-c-dual-list-selector__item--PaddingLeft: var(--pf-v6-c-dual-list-selector__draggable--item--PaddingLeft);
201
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart);
201
202
  }
202
203
  .pf-v6-c-dual-list-selector__draggable .pf-v6-c-button {
203
204
  --pf-v6-c-button--FontSize: inherit;
@@ -210,16 +211,16 @@
210
211
  .pf-v6-c-dual-list-selector__item {
211
212
  position: relative;
212
213
  width: 100%;
213
- padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingTop);
214
- padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBottom);
215
- padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
216
- padding-inline-end: var(--pf-v6-c-dual-list-selector__item--PaddingRight);
214
+ padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
215
+ padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
216
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
217
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__item--PaddingInlineEnd);
217
218
  cursor: pointer;
218
219
  outline-offset: -2px;
219
220
  }
220
221
 
221
222
  .pf-v6-c-dual-list-selector__item-count {
222
- margin-inline-start: var(--pf-v6-c-dual-list-selector__item-count--Marginleft);
223
+ margin-inline-start: var(--pf-v6-c-dual-list-selector__item-count--MarginInlineStart);
223
224
  }
224
225
  .pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read {
225
226
  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor);
@@ -241,8 +242,8 @@
241
242
  align-items: center;
242
243
  align-self: center;
243
244
  justify-content: center;
244
- padding-inline-start: var(--pf-v6-c-dual-list-selector__controls--PaddingLeft);
245
- padding-inline-end: var(--pf-v6-c-dual-list-selector__controls--PaddingRight);
245
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__controls--PaddingInlineStart);
246
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd);
246
247
  margin-block-start: var(--pf-v6-c-dual-list-selector__controls--MarginBlockStart);
247
248
  }
248
249
 
@@ -256,18 +257,18 @@
256
257
  }
257
258
 
258
259
  .pf-v6-c-dual-list-selector__item-toggle {
259
- padding-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingTop);
260
- padding-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingBottom);
261
- padding-inline-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingLeft);
262
- padding-inline-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingRight);
263
- margin-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--MarginTop);
264
- margin-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--MarginBottom);
260
+ padding-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingBlockStart);
261
+ padding-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingBlockEnd);
262
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineStart);
263
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd);
264
+ margin-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart);
265
+ margin-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd);
265
266
  }
266
267
 
267
268
  .pf-v6-c-dual-list-selector__item-check {
268
269
  display: flex;
269
270
  align-items: center;
270
- margin-inline-end: var(--pf-v6-c-dual-list-selector__item-check--MarginRight);
271
+ margin-inline-end: var(--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd);
271
272
  }
272
273
 
273
274
  .pf-v6-c-dual-list-selector__item-toggle-icon {
@@ -280,42 +281,42 @@
280
281
  }
281
282
 
282
283
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
283
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 1 + var(--pf-v6-c-dual-list-selector__item--indent--base));
284
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
284
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 1 + var(--pf-v6-c-dual-list-selector__item--indent--base));
285
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
285
286
  }
286
287
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
287
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 2 + var(--pf-v6-c-dual-list-selector__item--indent--base));
288
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
288
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 2 + var(--pf-v6-c-dual-list-selector__item--indent--base));
289
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
289
290
  }
290
291
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
291
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 3 + var(--pf-v6-c-dual-list-selector__item--indent--base));
292
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
292
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 3 + var(--pf-v6-c-dual-list-selector__item--indent--base));
293
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
293
294
  }
294
295
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
295
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 4 + var(--pf-v6-c-dual-list-selector__item--indent--base));
296
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
296
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 4 + var(--pf-v6-c-dual-list-selector__item--indent--base));
297
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
297
298
  }
298
299
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
299
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 5 + var(--pf-v6-c-dual-list-selector__item--indent--base));
300
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
300
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 5 + var(--pf-v6-c-dual-list-selector__item--indent--base));
301
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
301
302
  }
302
303
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
303
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 6 + var(--pf-v6-c-dual-list-selector__item--indent--base));
304
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
304
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 6 + var(--pf-v6-c-dual-list-selector__item--indent--base));
305
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
305
306
  }
306
307
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
307
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 7 + var(--pf-v6-c-dual-list-selector__item--indent--base));
308
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
308
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 7 + var(--pf-v6-c-dual-list-selector__item--indent--base));
309
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
309
310
  }
310
311
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
311
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 8 + var(--pf-v6-c-dual-list-selector__item--indent--base));
312
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
312
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 8 + var(--pf-v6-c-dual-list-selector__item--indent--base));
313
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
313
314
  }
314
315
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
315
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 9 + var(--pf-v6-c-dual-list-selector__item--indent--base));
316
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
316
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 9 + var(--pf-v6-c-dual-list-selector__item--indent--base));
317
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
317
318
  }
318
319
  .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
319
- --pf-v6-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v6-c-dual-list-selector__item--indent--base));
320
- --pf-v6-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v6-c-dual-list-selector__item--PaddingLeft);
320
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v6-c-dual-list-selector__item--indent--base));
321
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
321
322
  }
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -17,15 +17,15 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
17
17
  --#{$dual-list-selector}--GridTemplateColumns--pane--MinMax--max: #{pf-size-prem(450px)};
18
18
 
19
19
  // Header
20
- --#{$dual-list-selector}__header--MarginBottom: var(--pf-t--global--spacer--sm);
20
+ --#{$dual-list-selector}__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
21
21
 
22
22
  // Title
23
23
  --#{$dual-list-selector}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
24
24
  --#{$dual-list-selector}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
25
25
 
26
26
  // Tools
27
- --#{$dual-list-selector}__tools--MarginBottom: var(--pf-t--global--spacer--md);
28
- --#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
27
+ --#{$dual-list-selector}__tools--MarginBlockEnd: var(--pf-t--global--spacer--md);
28
+ --#{$dual-list-selector}__tools-filter--tools-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
29
29
 
30
30
  // Menu
31
31
  --#{$dual-list-selector}__menu--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -44,14 +44,14 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
44
44
  --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
45
45
 
46
46
  // Item
47
- --#{$dual-list-selector}__item--PaddingTop: var(--pf-t--global--spacer--sm);
48
- --#{$dual-list-selector}__item--PaddingRight: var(--pf-t--global--spacer--md);
49
- --#{$dual-list-selector}__item--PaddingBottom: var(--pf-t--global--spacer--sm);
50
- --#{$dual-list-selector}__item--PaddingLeft: var(--pf-t--global--spacer--md);
51
- --#{$dual-list-selector}__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
47
+ --#{$dual-list-selector}__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
48
+ --#{$dual-list-selector}__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
49
+ --#{$dual-list-selector}__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
50
+ --#{$dual-list-selector}__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
51
+ --#{$dual-list-selector}__item--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
52
52
  --#{$dual-list-selector}__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--#{$dual-list-selector}__list-item-row--FontSize));
53
53
  --#{$dual-list-selector}__item--nested-indent--base: calc(var(--#{$dual-list-selector}__item--indent--base) - var(--pf-t--global--spacer--md));
54
- --#{$dual-list-selector}__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
54
+ --#{$dual-list-selector}__draggable--item--PaddingInlineStart: var(--pf-t--global--spacer--xs);
55
55
 
56
56
  // Item text
57
57
  --#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -59,25 +59,26 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
59
59
  --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
60
60
 
61
61
  // Status
62
- --#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
62
+ --#{$dual-list-selector}__status--MarginBlockEnd: var(--pf-t--global--spacer--sm);
63
63
  --#{$dual-list-selector}__status-text--FontSize: var(--pf-t--global--font--size--sm);
64
64
  --#{$dual-list-selector}__status-text--Color: var(--pf-t--global--text--color--subtle);
65
65
 
66
66
  // Controls
67
- --#{$dual-list-selector}__controls--PaddingRight: var(--pf-t--global--spacer--md);
68
- --#{$dual-list-selector}__controls--PaddingLeft: var(--pf-t--global--spacer--md);
67
+ --#{$dual-list-selector}__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
68
+ --#{$dual-list-selector}__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
69
69
  --#{$dual-list-selector}__controls--Gap: var(--pf-t--global--spacer--sm);
70
70
  --#{$dual-list-selector}__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
71
71
 
72
72
  // Toggle
73
- --#{$dual-list-selector}__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
74
- --#{$dual-list-selector}__list__list__item-toggle--Left: 0;
73
+ --#{$dual-list-selector}__item-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
74
+ --#{$dual-list-selector}__list__list__item-toggle--InsetInlineStart: 0;
75
75
  --#{$dual-list-selector}__list__list__item-toggle--TranslateX: -100%;
76
76
 
77
77
  // Check
78
- --#{$dual-list-selector}__item-check--MarginRight: var(--pf-t--global--spacer--sm);
78
+ --#{$dual-list-selector}__item-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
79
79
 
80
80
  // Badge
81
+ --#{$dual-list-selector}__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
81
82
  --#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
82
83
 
83
84
  // Icon
@@ -115,7 +116,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
115
116
 
116
117
  .#{$dual-list-selector}__header {
117
118
  grid-area: var(--#{$dual-list-selector}__header--GridArea);
118
- margin-block-end: var(--#{$dual-list-selector}__header--MarginBottom);
119
+ margin-block-end: var(--#{$dual-list-selector}__header--MarginBlockEnd);
119
120
  }
120
121
 
121
122
  .#{$dual-list-selector}__title-text {
@@ -126,7 +127,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
126
127
  .#{$dual-list-selector}__tools {
127
128
  display: flex;
128
129
  grid-area: var(--#{$dual-list-selector}__tools--GridArea);
129
- margin-block-end: var(--#{$dual-list-selector}__tools--MarginBottom);
130
+ margin-block-end: var(--#{$dual-list-selector}__tools--MarginBlockEnd);
130
131
  }
131
132
 
132
133
  .#{$dual-list-selector}__tools-filter {
@@ -137,14 +138,14 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
137
138
  display: flex;
138
139
 
139
140
  .#{$dual-list-selector}__tools-filter ~ & {
140
- margin-inline-start: var(--#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft);
141
+ margin-inline-start: var(--#{$dual-list-selector}__tools-filter--tools-actions--MarginInlineStart);
141
142
  }
142
143
  }
143
144
 
144
145
  .#{$dual-list-selector}__status {
145
146
  display: flex;
146
147
  grid-area: var(--#{$dual-list-selector}__status--GridArea);
147
- margin-block-end: var(--#{$dual-list-selector}__status--MarginBottom);
148
+ margin-block-end: var(--#{$dual-list-selector}__status--MarginBlockEnd);
148
149
  }
149
150
 
150
151
  .#{$dual-list-selector}__status-text {
@@ -167,8 +168,8 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
167
168
  --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
168
169
 
169
170
  & & {
170
- --#{$dual-list-selector}__item-toggle--MarginTop: 0;
171
- --#{$dual-list-selector}__item-toggle--MarginBottom: 0;
171
+ --#{$dual-list-selector}__item-toggle--MarginBlockStart: 0;
172
+ --#{$dual-list-selector}__item-toggle--MarginBlockEnd: 0;
172
173
 
173
174
  .#{$dual-list-selector}__item-toggle {
174
175
  @include pf-v6-bidirectional-style(
@@ -178,7 +179,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
178
179
  );
179
180
 
180
181
  position: absolute;
181
- inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
182
+ inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--InsetInlineStart);
182
183
  }
183
184
  }
184
185
 
@@ -196,7 +197,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
196
197
  }
197
198
 
198
199
  &.pf-m-expandable {
199
- --#{$dual-list-selector}__item--PaddingLeft: var(--#{$dual-list-selector}__item--m-expandable--PaddingLeft);
200
+ --#{$dual-list-selector}__item--PaddingInlineStart: var(--#{$dual-list-selector}__item--m-expandable--PaddingInlineStart);
200
201
  }
201
202
 
202
203
  &.pf-m-expanded {
@@ -255,7 +256,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
255
256
  display: flex;
256
257
 
257
258
  + .#{$dual-list-selector}__item {
258
- --#{$dual-list-selector}__item--PaddingLeft: var(--#{$dual-list-selector}__draggable--item--PaddingLeft);
259
+ --#{$dual-list-selector}__item--PaddingInlineStart: var(--#{$dual-list-selector}__draggable--item--PaddingInlineStart);
259
260
  }
260
261
 
261
262
  .#{$button} {
@@ -272,16 +273,16 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
272
273
  .#{$dual-list-selector}__item {
273
274
  position: relative;
274
275
  width: 100%;
275
- padding-block-start: var(--#{$dual-list-selector}__item--PaddingTop);
276
- padding-block-end: var(--#{$dual-list-selector}__item--PaddingBottom);
277
- padding-inline-start: var(--#{$dual-list-selector}__item--PaddingLeft);
278
- padding-inline-end: var(--#{$dual-list-selector}__item--PaddingRight);
276
+ padding-block-start: var(--#{$dual-list-selector}__item--PaddingBlockStart);
277
+ padding-block-end: var(--#{$dual-list-selector}__item--PaddingBlockEnd);
278
+ padding-inline-start: var(--#{$dual-list-selector}__item--PaddingInlineStart);
279
+ padding-inline-end: var(--#{$dual-list-selector}__item--PaddingInlineEnd);
279
280
  cursor: pointer;
280
281
  outline-offset: -2px;
281
282
  }
282
283
 
283
284
  .#{$dual-list-selector}__item-count {
284
- margin-inline-start: var(--#{$dual-list-selector}__item-count--Marginleft);
285
+ margin-inline-start: var(--#{$dual-list-selector}__item-count--MarginInlineStart);
285
286
 
286
287
  .#{$badge}.pf-m-read {
287
288
  --#{$badge}--m-read--BackgroundColor: var(--#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor);
@@ -303,8 +304,8 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
303
304
  align-items: center;
304
305
  align-self: center;
305
306
  justify-content: center;
306
- padding-inline-start: var(--#{$dual-list-selector}__controls--PaddingLeft);
307
- padding-inline-end: var(--#{$dual-list-selector}__controls--PaddingRight);
307
+ padding-inline-start: var(--#{$dual-list-selector}__controls--PaddingInlineStart);
308
+ padding-inline-end: var(--#{$dual-list-selector}__controls--PaddingInlineEnd);
308
309
  margin-block-start: var(--#{$dual-list-selector}__controls--MarginBlockStart);
309
310
  }
310
311
 
@@ -318,18 +319,18 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
318
319
  }
319
320
 
320
321
  .#{$dual-list-selector}__item-toggle {
321
- padding-block-start: var(--#{$dual-list-selector}__item-toggle--PaddingTop);
322
- padding-block-end: var(--#{$dual-list-selector}__item-toggle--PaddingBottom);
323
- padding-inline-start: var(--#{$dual-list-selector}__item-toggle--PaddingLeft);
324
- padding-inline-end: var(--#{$dual-list-selector}__item-toggle--PaddingRight);
325
- margin-block-start: var(--#{$dual-list-selector}__item-toggle--MarginTop);
326
- margin-block-end: var(--#{$dual-list-selector}__item-toggle--MarginBottom);
322
+ padding-block-start: var(--#{$dual-list-selector}__item-toggle--PaddingBlockStart);
323
+ padding-block-end: var(--#{$dual-list-selector}__item-toggle--PaddingBlockEnd);
324
+ padding-inline-start: var(--#{$dual-list-selector}__item-toggle--PaddingInlineStart);
325
+ padding-inline-end: var(--#{$dual-list-selector}__item-toggle--PaddingInlineEnd);
326
+ margin-block-start: var(--#{$dual-list-selector}__item-toggle--MarginBlockStart);
327
+ margin-block-end: var(--#{$dual-list-selector}__item-toggle--MarginBlockEnd);
327
328
  }
328
329
 
329
330
  .#{$dual-list-selector}__item-check {
330
331
  display: flex;
331
332
  align-items: center;
332
- margin-inline-end: var(--#{$dual-list-selector}__item-check--MarginRight);
333
+ margin-inline-end: var(--#{$dual-list-selector}__item-check--MarginInlineEnd);
333
334
  }
334
335
 
335
336
  .#{$dual-list-selector}__item-toggle-icon {
@@ -348,8 +349,8 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
348
349
 
349
350
  @for $i from 1 through $pf-v6-c-dual-list-selector__item--MaxNesting {
350
351
  #{$nested-item} {
351
- --#{$dual-list-selector}__item--PaddingLeft: calc(var(--#{$dual-list-selector}__item--nested-indent--base) * #{$i} + var(--#{$dual-list-selector}__item--indent--base));
352
- --#{$dual-list-selector}__list__list__item-toggle--Left: var(--#{$dual-list-selector}__item--PaddingLeft);
352
+ --#{$dual-list-selector}__item--PaddingInlineStart: calc(var(--#{$dual-list-selector}__item--nested-indent--base) * #{$i} + var(--#{$dual-list-selector}__item--indent--base));
353
+ --#{$dual-list-selector}__list__list__item-toggle--InsetInlineStart: var(--#{$dual-list-selector}__item--PaddingInlineStart);
353
354
  }
354
355
 
355
356
  $nested-item: $nested-item + " " + $root;
package/components/EmptyState/empty-state.css CHANGED
@@ -1,21 +1,21 @@
1
1
  :where(:root, .pf-v6-c-empty-state) {
2
- --pf-v6-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
3
- --pf-v6-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
4
- --pf-v6-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
5
- --pf-v6-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
6
- --pf-v6-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
7
- --pf-v6-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
8
- --pf-v6-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
2
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-t--global--spacer--xl);
3
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
4
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
5
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-t--global--spacer--xl);
6
+ --pf-v6-c-empty-state--m-xs--PaddingBlockStart: var(--pf-t--global--spacer--md);
7
+ --pf-v6-c-empty-state--m-xs--PaddingInlineEnd: var(--pf-t--global--spacer--md);
8
+ --pf-v6-c-empty-state--m-xs--PaddingBlockEnd: var(--pf-t--global--spacer--md);
9
+ --pf-v6-c-empty-state--m-xs--PaddingInlineStart: var(--pf-t--global--spacer--md);
10
10
  --pf-v6-c-empty-state__content--MaxWidth: none;
11
11
  --pf-v6-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
12
12
  --pf-v6-c-empty-state--m-sm__content--MaxWidth: 25rem;
13
13
  --pf-v6-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
15
15
  --pf-v6-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
16
16
  --pf-v6-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
17
- --pf-v6-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
18
- --pf-v6-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
17
+ --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
18
+ --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd: var(--pf-t--global--spacer--xl);
19
19
  --pf-v6-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
20
20
  --pf-v6-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
21
21
  --pf-v6-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -29,16 +29,16 @@
29
29
  --pf-v6-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
30
30
  --pf-v6-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
31
31
  --pf-v6-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
32
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
32
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-t--global--spacer--md);
33
33
  --pf-v6-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
34
34
  --pf-v6-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
35
35
  --pf-v6-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
36
- --pf-v6-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
36
+ --pf-v6-c-empty-state--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
37
37
  --pf-v6-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
38
- --pf-v6-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
38
+ --pf-v6-c-empty-state--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
39
39
  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
40
- --pf-v6-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
41
+ --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
42
42
  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
43
43
  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
44
44
  }
@@ -47,23 +47,23 @@
47
47
  display: flex;
48
48
  align-items: center;
49
49
  justify-content: center;
50
- padding-block-start: var(--pf-v6-c-empty-state--PaddingTop);
51
- padding-block-end: var(--pf-v6-c-empty-state--PaddingBottom);
52
- padding-inline-start: var(--pf-v6-c-empty-state--PaddingLeft);
53
- padding-inline-end: var(--pf-v6-c-empty-state--PaddingRight);
50
+ padding-block-start: var(--pf-v6-c-empty-state--PaddingBlockStart);
51
+ padding-block-end: var(--pf-v6-c-empty-state--PaddingBlockEnd);
52
+ padding-inline-start: var(--pf-v6-c-empty-state--PaddingInlineStart);
53
+ padding-inline-end: var(--pf-v6-c-empty-state--PaddingInlineEnd);
54
54
  text-align: center;
55
55
  }
56
56
  .pf-v6-c-empty-state.pf-m-xs {
57
- --pf-v6-c-empty-state--PaddingTop: var(--pf-v6-c-empty-state--m-xs--PaddingTop);
58
- --pf-v6-c-empty-state--PaddingRight: var(--pf-v6-c-empty-state--m-xs--PaddingRight);
59
- --pf-v6-c-empty-state--PaddingBottom: var(--pf-v6-c-empty-state--m-xs--PaddingBottom);
60
- --pf-v6-c-empty-state--PaddingLeft: var(--pf-v6-c-empty-state--m-xs--PaddingLeft);
57
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-v6-c-empty-state--m-xs--PaddingBlockStart);
58
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-v6-c-empty-state--m-xs--PaddingInlineEnd);
59
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-v6-c-empty-state--m-xs--PaddingBlockEnd);
60
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-v6-c-empty-state--m-xs--PaddingInlineStart);
61
61
  --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xs__title-text--FontSize);
62
62
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-xs__content--MaxWidth);
63
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-v6-c-empty-state--m-xs__icon--MarginBottom);
64
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-v6-c-empty-state--m-xs__body--MarginTop);
63
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd);
64
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__body--MarginBlockStart);
65
65
  --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xs__body--FontSize);
66
- --pf-v6-c-empty-state__footer--MarginTop: var(--pf-v6-c-empty-state--m-xs__footer--MarginTop);
66
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart);
67
67
  }
68
68
  .pf-v6-c-empty-state.pf-m-sm {
69
69
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-sm__content--MaxWidth);
@@ -72,9 +72,9 @@
72
72
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-lg__content--MaxWidth);
73
73
  }
74
74
  .pf-v6-c-empty-state.pf-m-xl {
75
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-v6-c-empty-state--m-xl__body--MarginTop);
75
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xl__body--MarginBlockStart);
76
76
  --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xl__body--FontSize);
77
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-v6-c-empty-state--m-xl__icon--MarginBottom);
77
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd);
78
78
  --pf-v6-c-empty-state__icon--FontSize: var(--pf-v6-c-empty-state--m-xl__icon--FontSize);
79
79
  --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xl__title-text--FontSize);
80
80
  --pf-v6-c-empty-state__title-text--LineHeight: var(--pf-v6-c-empty-state--m-xl__title-text--LineHeight);
@@ -103,7 +103,7 @@
103
103
  }
104
104
 
105
105
  .pf-v6-c-empty-state__icon {
106
- margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBottom);
106
+ margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBlockEnd);
107
107
  font-size: var(--pf-v6-c-empty-state__icon--FontSize);
108
108
  line-height: 1;
109
109
  color: var(--pf-v6-c-empty-state__icon--Color);
@@ -117,7 +117,7 @@
117
117
  }
118
118
 
119
119
  .pf-v6-c-empty-state__body {
120
- margin-block-start: var(--pf-v6-c-empty-state__body--MarginTop);
120
+ margin-block-start: var(--pf-v6-c-empty-state__body--MarginBlockStart);
121
121
  font-size: var(--pf-v6-c-empty-state--body--FontSize);
122
122
  color: var(--pf-v6-c-empty-state__body--Color);
123
123
  }
@@ -127,7 +127,7 @@
127
127
  flex-direction: column;
128
128
  row-gap: var(--pf-v6-c-empty-state__footer--RowGap);
129
129
  align-items: center;
130
- margin-block-start: var(--pf-v6-c-empty-state__footer--MarginTop);
130
+ margin-block-start: var(--pf-v6-c-empty-state__footer--MarginBlockStart);
131
131
  }
132
132
 
133
133
  .pf-v6-c-empty-state__actions {