@patternfly/patternfly 6.0.0-alpha.173 → 6.0.0-alpha.174

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 (10) hide show
  1. package/components/Content/content.css +19 -43
  2. package/components/Content/content.scss +17 -60
  3. package/components/List/list.css +33 -40
  4. package/components/List/list.scss +39 -48
  5. package/components/_index.css +52 -83
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +52 -83
  8. package/patternfly.css +52 -83
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Content/content.css CHANGED
@@ -51,16 +51,10 @@
51
51
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
52
52
  --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
53
53
  --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
54
- --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
55
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
56
- --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
57
- --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
59
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
60
- --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
61
- --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
54
+ --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
55
+ --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
56
+ --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
62
57
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
63
- --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
64
58
  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
65
59
  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
66
60
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -130,17 +124,6 @@
130
124
  margin-block-end: 0;
131
125
  }
132
126
 
133
- :is(.pf-v6-c-content--ol,
134
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
135
- margin: 0;
136
- }
137
- :is(.pf-v6-c-content--ol,
138
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
139
- padding-inline-start: 0;
140
- margin-inline-start: 0;
141
- list-style: none;
142
- }
143
-
144
127
  :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
145
128
  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
146
129
  margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
@@ -214,36 +197,29 @@
214
197
  border: none;
215
198
  }
216
199
 
217
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
218
- padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
219
- margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
200
+ :is(.pf-v6-c-content--ol,
201
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
202
+ display: flex;
203
+ flex-direction: column;
204
+ gap: var(--pf-v6-c-content--list--Gap);
205
+ padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
220
206
  }
221
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
222
- ul) {
223
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
224
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
207
+ :is(.pf-v6-c-content--ol,
208
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
209
+ padding-inline-start: 0;
210
+ list-style: none;
225
211
  }
226
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
227
- ol) {
228
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
229
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
212
+ :is(.pf-v6-c-content--ol,
213
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
214
+ .pf-v6-c-content--ul,
215
+ ol,
216
+ ul) {
217
+ margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
230
218
  }
231
219
 
232
220
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
233
- padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
234
- margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
235
221
  list-style: var(--pf-v6-c-content--ul--ListStyle);
236
222
  }
237
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
238
- ul) {
239
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
240
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
241
- }
242
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
243
- ol) {
244
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
245
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
246
- }
247
223
 
248
224
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
249
225
  display: grid;
package/components/Content/content.scss CHANGED
@@ -78,16 +78,10 @@
78
78
  --#{$content}--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300); // TODO semantic value?
79
79
 
80
80
  // Lists
81
- --#{$content}--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
82
- --#{$content}--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
83
- --#{$content}--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
84
- --#{$content}--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
85
- --#{$content}--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
86
- --#{$content}--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
87
- --#{$content}--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
88
- --#{$content}--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
81
+ --#{$content}--list--Gap: var(--pf-t--global--spacer--sm);
82
+ --#{$content}--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
83
+ --#{$content}--list--nested--MarginBlockStart: var(--#{$content}--list--Gap);
89
84
  --#{$content}--ul--ListStyle: var(--pf-t--global--list-style);
90
- --#{$content}--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
91
85
  --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
92
86
  --#{$content}--dl--RowGap: var(--pf-t--global--spacer--md);
93
87
  --#{$content}--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -188,23 +182,6 @@
188
182
  }
189
183
  }
190
184
 
191
- @at-root :is(
192
- .#{$content}--ol,
193
- .#{$content}--ul,
194
- & ol,
195
- & ul
196
- ) {
197
- margin: 0;
198
-
199
- // stylelint-disable selector-no-qualifying-type
200
- &.pf-m-plain {
201
- padding-inline-start: 0;
202
- margin-inline-start: 0;
203
- list-style: none;
204
- }
205
- // stylelint-enable
206
- }
207
-
208
185
  @at-root :is(
209
186
  .#{$content}--h1,
210
187
  & h1
@@ -308,27 +285,27 @@
308
285
 
309
286
  @at-root :is(
310
287
  .#{$content}--ol,
311
- & ol
288
+ .#{$content}--ul,
289
+ & ol,
290
+ & ul
312
291
  ) {
313
- padding-inline-start: var(--#{$content}--ol--PaddingInlineStart);
314
- margin-inline-start: var(--#{$content}--ol--MarginInlineStart);
292
+ display: flex;
293
+ flex-direction: column;
294
+ gap: var(--#{$content}--list--Gap);
295
+ padding-inline-start: var(--#{$content}--list--PaddingInlineStart);
315
296
 
316
- :is(
317
- .#{$content}--ul,
318
- ul
319
- ) {
320
- --#{$content}--ul--MarginInlineStart: var(--#{$content}--ul--nested--MarginInlineStart);
321
-
322
- margin-block-start: var(--#{$content}--ul--nested--MarginBlockStart);
297
+ &.pf-m-plain {
298
+ padding-inline-start: 0;
299
+ list-style: none;
323
300
  }
324
301
 
325
302
  :is(
326
303
  .#{$content}--ol,
327
- ol
304
+ .#{$content}--ul,
305
+ ol,
306
+ ul
328
307
  ) {
329
- --#{$content}--ol--MarginInlineStart: var(--#{$content}--ol--nested--MarginInlineStart);
330
-
331
- margin-block-start: var(--#{$content}--ol--nested--MarginBlockStart);
308
+ margin-block-start: var(--#{$content}--list--nested--MarginBlockStart);
332
309
  }
333
310
  }
334
311
 
@@ -336,27 +313,7 @@
336
313
  .#{$content}--ul,
337
314
  & ul
338
315
  ) {
339
- padding-inline-start: var(--#{$content}--ul--PaddingInlineStart);
340
- margin-inline-start: var(--#{$content}--ul--MarginInlineStart);
341
316
  list-style: var(--#{$content}--ul--ListStyle);
342
-
343
- :is(
344
- .#{$content}--ul,
345
- ul
346
- ) {
347
- --#{$content}--ul--MarginInlineStart: var(--#{$content}--ul--nested--MarginInlineStart);
348
-
349
- margin-block-start: var(--#{$content}--ul--nested--MarginBlockStart);
350
- }
351
-
352
- :is(
353
- .#{$content}--ol,
354
- ol
355
- ) {
356
- --#{$content}--ol--MarginInlineStart: var(--#{$content}--ol--nested--MarginInlineStart);
357
-
358
- margin-block-start: var(--#{$content}--ol--nested--MarginBlockStart);
359
- }
360
317
  }
361
318
 
362
319
  @at-root :is(
package/components/List/list.css CHANGED
@@ -1,13 +1,15 @@
1
1
  :where(:root, .pf-v6-c-list) {
2
2
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3
- --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
4
- --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
5
3
  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
6
- --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
8
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
10
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4
+ --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap);
6
+ --pf-v6-c-list--m-plain--PaddingInlineStart: 0;
7
+ --pf-v6-c-list--m-inline--PaddingInlineStart: 0;
8
+ --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
9
+ --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-list--m-bordered--li--PaddingBlockStart: var(--pf-v6-c-list--Gap);
11
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
11
13
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
12
14
  --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
13
15
  --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -19,32 +21,18 @@
19
21
  }
20
22
 
21
23
  .pf-v6-c-list {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--pf-v6-c-list--Gap);
22
27
  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
23
28
  }
24
- .pf-v6-c-list ol,
25
- .pf-v6-c-list ul {
26
- margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
27
- margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
28
- }
29
- .pf-v6-c-list li + li {
30
- margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
29
+ .pf-v6-c-list .pf-v6-c-list {
30
+ padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart);
31
31
  }
32
32
  ul.pf-v6-c-list {
33
33
  list-style: var(--pf-v6-c-list--ul--ListStyle);
34
34
  }
35
35
 
36
- .pf-v6-c-list .pf-v6-c-list__item {
37
- display: flex;
38
- }
39
- .pf-v6-c-list .pf-v6-c-list__item-icon {
40
- flex-shrink: 0;
41
- min-width: var(--pf-v6-c-list__item-icon--MinWidth);
42
- margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
43
- margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
44
- font-size: var(--pf-v6-c-list__item-icon--FontSize);
45
- line-height: 1;
46
- color: var(--pf-v6-c-list__item-icon--Color);
47
- }
48
36
  .pf-v6-c-list.pf-m-icon-lg {
49
37
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
50
38
  --pf-v6-c-list__item-icon--MarginBlockStart: 0;
@@ -52,26 +40,31 @@ ul.pf-v6-c-list {
52
40
  --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
53
41
  }
54
42
  .pf-v6-c-list.pf-m-plain {
55
- --pf-v6-c-list--PaddingInlineStart: 0;
43
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-plain--PaddingInlineStart);
56
44
  list-style: none;
57
45
  }
58
46
  .pf-v6-c-list.pf-m-inline {
59
- --pf-v6-c-list--PaddingInlineStart: 0;
60
- display: flex;
47
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-inline--PaddingInlineStart);
48
+ --pf-v6-c-list--Gap: var(--pf-v6-c-list--m-inline--RowGap) var(--pf-v6-c-list--m-inline--ColumnGap);
49
+ flex-direction: row;
61
50
  flex-wrap: wrap;
62
51
  list-style: none;
63
52
  }
64
- .pf-v6-c-list.pf-m-inline li {
65
- --pf-v6-c-list--li--MarginBlockStart: 0;
66
- }
67
- .pf-v6-c-list.pf-m-inline li:not(:last-child) {
68
- margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
53
+ .pf-v6-c-list.pf-m-bordered > * + * {
54
+ padding-block-start: var(--pf-v6-c-list--m-bordered--li--PaddingBlockStart);
55
+ border-block-start: var(--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockStartColor);
69
56
  }
70
- .pf-v6-c-list.pf-m-bordered > * {
71
- padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
72
- border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
57
+
58
+ .pf-v6-c-list__item {
59
+ display: flex;
73
60
  }
74
- .pf-v6-c-list.pf-m-bordered > :last-child {
75
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
76
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
61
+
62
+ .pf-v6-c-list__item-icon {
63
+ flex-shrink: 0;
64
+ min-width: var(--pf-v6-c-list__item-icon--MinWidth);
65
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
66
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
67
+ font-size: var(--pf-v6-c-list__item-icon--FontSize);
68
+ line-height: 1;
69
+ color: var(--pf-v6-c-list__item-icon--Color);
77
70
  }
package/components/List/list.scss CHANGED
@@ -3,18 +3,24 @@
3
3
  :where(:root, .#{$list}) {
4
4
  // list
5
5
  --#{$list}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
6
- --#{$list}--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
7
- --#{$list}--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
8
6
  --#{$list}--ul--ListStyle: var(--pf-t--global--list-style);
9
- --#{$list}--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
7
+ --#{$list}--Gap: var(--pf-t--global--spacer--sm);
8
+
9
+ // nested
10
+ --#{$list}--nested--PaddingBlockStart: var(--#{$list}--Gap);
11
+
12
+ // plain
13
+ --#{$list}--m-plain--PaddingInlineStart: 0;
10
14
 
11
15
  // inline
12
- --#{$list}--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
16
+ --#{$list}--m-inline--PaddingInlineStart: 0;
17
+ --#{$list}--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
18
+ --#{$list}--m-inline--RowGap: var(--pf-t--global--spacer--xs);
13
19
 
14
20
  // bordered
15
- --#{$list}--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16
- --#{$list}--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
17
- --#{$list}--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
21
+ --#{$list}--m-bordered--li--PaddingBlockStart: var(--#{$list}--Gap);
22
+ --#{$list}--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
23
+ --#{$list}--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
18
24
 
19
25
  // icon
20
26
  --#{$list}__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
@@ -28,36 +34,19 @@
28
34
  }
29
35
 
30
36
  .#{$list} {
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: var(--#{$list}--Gap);
31
40
  padding-inline-start: var(--#{$list}--PaddingInlineStart);
32
41
 
33
- ol,
34
- ul {
35
- margin-block-start: var(--#{$list}--nested--MarginBlockStart);
36
- margin-inline-start: var(--#{$list}--nested--MarginInlineStart);
37
- }
38
-
39
- li + li {
40
- margin-block-start: var(--#{$list}--li--MarginBlockStart);
42
+ & & {
43
+ padding-block-start: var(--#{$list}--nested--PaddingBlockStart);
41
44
  }
42
45
 
43
46
  @at-root ul#{&} {
44
47
  list-style: var(--#{$list}--ul--ListStyle);
45
48
  }
46
49
 
47
- .#{$list}__item {
48
- display: flex;
49
- }
50
-
51
- .#{$list}__item-icon {
52
- flex-shrink: 0;
53
- min-width: var(--#{$list}__item-icon--MinWidth);
54
- margin-block-start: var(--#{$list}__item-icon--MarginBlockStart);
55
- margin-inline-end: var(--#{$list}__item-icon--MarginInlineEnd);
56
- font-size: var(--#{$list}__item-icon--FontSize);
57
- line-height: 1;
58
- color: var(--#{$list}__item-icon--Color);
59
- }
60
-
61
50
  &.pf-m-icon-lg {
62
51
  --#{$list}__item-icon--MinWidth: var(--#{$list}--m-icon-lg__item-icon--MinWidth);
63
52
  --#{$list}__item-icon--MarginBlockStart: 0;
@@ -66,36 +55,38 @@
66
55
  }
67
56
 
68
57
  &.pf-m-plain {
69
- --#{$list}--PaddingInlineStart: 0;
58
+ --#{$list}--PaddingInlineStart: var(--#{$list}--m-plain--PaddingInlineStart);
70
59
 
71
60
  list-style: none;
72
61
  }
73
62
 
74
63
  &.pf-m-inline {
75
- --#{$list}--PaddingInlineStart: 0;
64
+ --#{$list}--PaddingInlineStart: var(--#{$list}--m-inline--PaddingInlineStart);
65
+ --#{$list}--Gap: var(--#{$list}--m-inline--RowGap) var(--#{$list}--m-inline--ColumnGap);
76
66
 
77
- display: flex;
67
+ flex-direction: row;
78
68
  flex-wrap: wrap;
79
69
  list-style: none;
80
-
81
- li {
82
- --#{$list}--li--MarginBlockStart: 0;
83
-
84
- &:not(:last-child) {
85
- margin-inline-end: var(--#{$list}--m-inline--li--MarginInlineEnd);
86
- }
87
- }
88
70
  }
89
71
 
90
72
  &.pf-m-bordered {
91
- > * {
92
- padding-block-end: var(--#{$list}--m-bordered--li--PaddingBlockEnd);
93
- border-block-end: var(--#{$list}--m-bordered--li--BorderBlockEndWidth) solid var(--#{$list}--m-bordered--li--BorderBlockEndColor);
94
- }
95
-
96
- > :last-child {
97
- --#{$list}--m-bordered--li--PaddingBlockEnd: 0;
98
- --#{$list}--m-bordered--li--BorderBlockEndWidth: 0;
73
+ > * + * {
74
+ padding-block-start: var(--#{$list}--m-bordered--li--PaddingBlockStart);
75
+ border-block-start: var(--#{$list}--m-bordered--li--BorderBlockStartWidth) solid var(--#{$list}--m-bordered--li--BorderBlockStartColor);
99
76
  }
100
77
  }
101
78
  }
79
+
80
+ .#{$list}__item {
81
+ display: flex;
82
+ }
83
+
84
+ .#{$list}__item-icon {
85
+ flex-shrink: 0;
86
+ min-width: var(--#{$list}__item-icon--MinWidth);
87
+ margin-block-start: var(--#{$list}__item-icon--MarginBlockStart);
88
+ margin-inline-end: var(--#{$list}__item-icon--MarginInlineEnd);
89
+ font-size: var(--#{$list}__item-icon--FontSize);
90
+ line-height: 1;
91
+ color: var(--#{$list}__item-icon--Color);
92
+ }
package/components/_index.css CHANGED
@@ -2979,16 +2979,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2979
2979
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
2980
2980
  --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2981
2981
  --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
2982
- --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2983
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
2984
- --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2985
- --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2986
- --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2987
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
2988
- --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2989
- --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2982
+ --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
2983
+ --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2984
+ --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
2990
2985
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
2991
- --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
2992
2986
  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
2993
2987
  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
2994
2988
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -3058,17 +3052,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3058
3052
  margin-block-end: 0;
3059
3053
  }
3060
3054
 
3061
- :is(.pf-v6-c-content--ol,
3062
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
3063
- margin: 0;
3064
- }
3065
- :is(.pf-v6-c-content--ol,
3066
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
3067
- padding-inline-start: 0;
3068
- margin-inline-start: 0;
3069
- list-style: none;
3070
- }
3071
-
3072
3055
  :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
3073
3056
  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
3074
3057
  margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
@@ -3142,36 +3125,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3142
3125
  border: none;
3143
3126
  }
3144
3127
 
3145
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
3146
- padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
3147
- margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
3128
+ :is(.pf-v6-c-content--ol,
3129
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
3130
+ display: flex;
3131
+ flex-direction: column;
3132
+ gap: var(--pf-v6-c-content--list--Gap);
3133
+ padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
3148
3134
  }
3149
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
3150
- ul) {
3151
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
3152
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
3135
+ :is(.pf-v6-c-content--ol,
3136
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
3137
+ padding-inline-start: 0;
3138
+ list-style: none;
3153
3139
  }
3154
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
3155
- ol) {
3156
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
3157
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
3140
+ :is(.pf-v6-c-content--ol,
3141
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
3142
+ .pf-v6-c-content--ul,
3143
+ ol,
3144
+ ul) {
3145
+ margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
3158
3146
  }
3159
3147
 
3160
3148
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
3161
- padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
3162
- margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
3163
3149
  list-style: var(--pf-v6-c-content--ul--ListStyle);
3164
3150
  }
3165
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
3166
- ul) {
3167
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
3168
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
3169
- }
3170
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
3171
- ol) {
3172
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
3173
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
3174
- }
3175
3151
 
3176
3152
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
3177
3153
  display: grid;
@@ -8478,14 +8454,16 @@ input.pf-v6-c-label__content {
8478
8454
 
8479
8455
  :where(:root, .pf-v6-c-list) {
8480
8456
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8481
- --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
8482
- --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
8483
8457
  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
8484
- --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
8485
- --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
8486
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8487
- --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
8488
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
8458
+ --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
8459
+ --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap);
8460
+ --pf-v6-c-list--m-plain--PaddingInlineStart: 0;
8461
+ --pf-v6-c-list--m-inline--PaddingInlineStart: 0;
8462
+ --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
8463
+ --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--xs);
8464
+ --pf-v6-c-list--m-bordered--li--PaddingBlockStart: var(--pf-v6-c-list--Gap);
8465
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
8466
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
8489
8467
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
8490
8468
  --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
8491
8469
  --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -8497,32 +8475,18 @@ input.pf-v6-c-label__content {
8497
8475
  }
8498
8476
 
8499
8477
  .pf-v6-c-list {
8478
+ display: flex;
8479
+ flex-direction: column;
8480
+ gap: var(--pf-v6-c-list--Gap);
8500
8481
  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
8501
8482
  }
8502
- .pf-v6-c-list ol,
8503
- .pf-v6-c-list ul {
8504
- margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
8505
- margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
8506
- }
8507
- .pf-v6-c-list li + li {
8508
- margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
8483
+ .pf-v6-c-list .pf-v6-c-list {
8484
+ padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart);
8509
8485
  }
8510
8486
  ul.pf-v6-c-list {
8511
8487
  list-style: var(--pf-v6-c-list--ul--ListStyle);
8512
8488
  }
8513
8489
 
8514
- .pf-v6-c-list .pf-v6-c-list__item {
8515
- display: flex;
8516
- }
8517
- .pf-v6-c-list .pf-v6-c-list__item-icon {
8518
- flex-shrink: 0;
8519
- min-width: var(--pf-v6-c-list__item-icon--MinWidth);
8520
- margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
8521
- margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
8522
- font-size: var(--pf-v6-c-list__item-icon--FontSize);
8523
- line-height: 1;
8524
- color: var(--pf-v6-c-list__item-icon--Color);
8525
- }
8526
8490
  .pf-v6-c-list.pf-m-icon-lg {
8527
8491
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
8528
8492
  --pf-v6-c-list__item-icon--MarginBlockStart: 0;
@@ -8530,28 +8494,33 @@ ul.pf-v6-c-list {
8530
8494
  --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
8531
8495
  }
8532
8496
  .pf-v6-c-list.pf-m-plain {
8533
- --pf-v6-c-list--PaddingInlineStart: 0;
8497
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-plain--PaddingInlineStart);
8534
8498
  list-style: none;
8535
8499
  }
8536
8500
  .pf-v6-c-list.pf-m-inline {
8537
- --pf-v6-c-list--PaddingInlineStart: 0;
8538
- display: flex;
8501
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-inline--PaddingInlineStart);
8502
+ --pf-v6-c-list--Gap: var(--pf-v6-c-list--m-inline--RowGap) var(--pf-v6-c-list--m-inline--ColumnGap);
8503
+ flex-direction: row;
8539
8504
  flex-wrap: wrap;
8540
8505
  list-style: none;
8541
8506
  }
8542
- .pf-v6-c-list.pf-m-inline li {
8543
- --pf-v6-c-list--li--MarginBlockStart: 0;
8507
+ .pf-v6-c-list.pf-m-bordered > * + * {
8508
+ padding-block-start: var(--pf-v6-c-list--m-bordered--li--PaddingBlockStart);
8509
+ border-block-start: var(--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockStartColor);
8544
8510
  }
8545
- .pf-v6-c-list.pf-m-inline li:not(:last-child) {
8546
- margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
8547
- }
8548
- .pf-v6-c-list.pf-m-bordered > * {
8549
- padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
8550
- border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
8511
+
8512
+ .pf-v6-c-list__item {
8513
+ display: flex;
8551
8514
  }
8552
- .pf-v6-c-list.pf-m-bordered > :last-child {
8553
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
8554
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
8515
+
8516
+ .pf-v6-c-list__item-icon {
8517
+ flex-shrink: 0;
8518
+ min-width: var(--pf-v6-c-list__item-icon--MinWidth);
8519
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
8520
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
8521
+ font-size: var(--pf-v6-c-list__item-icon--FontSize);
8522
+ line-height: 1;
8523
+ color: var(--pf-v6-c-list__item-icon--Color);
8555
8524
  }
8556
8525
 
8557
8526
  :where(:root, .pf-v6-c-log-viewer) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.173",
4
+ "version": "6.0.0-alpha.174",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {