@patternfly/patternfly 6.0.0-alpha.221 → 6.0.0-alpha.223

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 (13) hide show
  1. package/components/ExpandableSection/expandable-section.css +25 -84
  2. package/components/ExpandableSection/expandable-section.scss +24 -90
  3. package/components/Toolbar/toolbar.css +1 -0
  4. package/components/Toolbar/toolbar.scss +1 -0
  5. package/components/_index.css +26 -84
  6. package/docs/components/CodeBlock/examples/CodeBlock.md +33 -22
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  8. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +62 -54
  9. package/package.json +5 -5
  10. package/patternfly-no-globals.css +26 -84
  11. package/patternfly.css +26 -84
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,10 +1,5 @@
1
1
  :where(:root, .pf-v6-c-expandable-section) {
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
- --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
7
- --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
2
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
8
3
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
9
4
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10
5
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -12,82 +7,50 @@
12
7
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13
8
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
14
9
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
- --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
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--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
10
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
23
11
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
12
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
16
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24
17
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
25
19
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
26
20
  --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--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
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
32
- --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
33
- --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
34
- --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
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--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
- --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--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);
21
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
48
22
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
23
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
49
24
  }
50
25
 
26
+ .pf-v6-c-expandable-section {
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: var(--pf-v6-c-expandable-section--Gap);
30
+ align-items: start;
31
+ }
51
32
  .pf-v6-c-expandable-section.pf-m-expanded {
52
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
53
33
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
54
34
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
55
- --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
56
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
35
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
57
36
  }
58
37
  .pf-v6-c-expandable-section.pf-m-limit-width {
59
38
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
60
39
  }
61
40
  .pf-v6-c-expandable-section.pf-m-display-lg {
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
- --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
67
- --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
68
- --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
69
- --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
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--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);
41
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
42
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
43
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
44
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
75
45
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
76
- border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
46
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
77
47
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
78
48
  }
79
49
  .pf-v6-c-expandable-section.pf-m-indented {
80
50
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
81
51
  }
82
52
  .pf-v6-c-expandable-section.pf-m-truncate {
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;
53
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
91
54
  }
92
55
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
93
56
  display: -webkit-box;
@@ -96,24 +59,8 @@
96
59
  overflow: hidden;
97
60
  }
98
61
 
99
- .pf-v6-c-expandable-section__toggle {
100
- display: flex;
101
- column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
102
- width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
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
- background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
108
- border: none;
109
- border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
110
- }
111
- .pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
112
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
113
- --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
114
- }
115
-
116
62
  .pf-v6-c-expandable-section__toggle-icon {
63
+ display: inline-block;
117
64
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
118
65
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
119
66
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -127,14 +74,8 @@
127
74
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
128
75
  }
129
76
 
130
- .pf-v6-c-expandable-section__toggle-text {
131
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
132
- }
133
-
134
77
  .pf-v6-c-expandable-section__content {
135
78
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
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);
79
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
80
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
140
81
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -1,13 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$expandable-section}) {
4
- // Toggle
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
- --#{$expandable-section}__toggle--BackgroundColor: transparent;
10
- --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
4
+ --#{$expandable-section}--Gap: var(--pf-t--global--spacer--sm);
11
5
 
12
6
  // Toggle icon
13
7
  --#{$expandable-section}__toggle-icon--MinWidth: 1em;
@@ -18,60 +12,41 @@
18
12
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
19
13
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
20
14
 
21
- // Toggle text
22
- --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
23
- --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
24
- --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
25
-
26
15
  // Content
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
16
  --#{$expandable-section}__content--MaxWidth: auto;
32
17
 
33
18
  // Limit Width
34
19
  --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
35
20
 
36
21
  // Large / Disclosure
22
+ --#{$expandable-section}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
23
+ --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24
+ --#{$expandable-section}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
25
+ --#{$expandable-section}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
26
+ --#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
37
27
  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
28
+ --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
38
29
  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
39
30
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
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
- --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
45
- --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
46
- --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
47
- --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
48
- --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
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
- --#{$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
31
 
54
32
  // Indented
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));
33
+ --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
58
34
 
59
35
  // Truncate
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
36
  --#{$expandable-section}--m-truncate__content--LineClamp: 3;
37
+ --#{$expandable-section}--m-truncate--Gap: var(--pf-t--global--spacer--xs);
66
38
  }
67
39
 
68
40
  .#{$expandable-section} {
41
+ display: flex;
42
+ flex-direction: column;
43
+ gap: var(--#{$expandable-section}--Gap);
44
+ align-items: start;
45
+
69
46
  &.pf-m-expanded {
70
- --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
71
47
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
72
48
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
73
- --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
74
- --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
49
+ --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
75
50
  }
76
51
 
77
52
  &.pf-m-limit-width {
@@ -79,22 +54,12 @@
79
54
  }
80
55
 
81
56
  &.pf-m-display-lg {
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
- --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
87
- --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
88
- --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
89
- --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
90
- --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
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
-
57
+ padding-block-start: var(--#{$expandable-section}--m-display-lg--PaddingBlockStart);
58
+ padding-block-end: var(--#{$expandable-section}--m-display-lg--PaddingBlockEnd);
59
+ padding-inline-start: var(--#{$expandable-section}--m-display-lg--PaddingInlineStart);
60
+ padding-inline-end: var(--#{$expandable-section}--m-display-lg--PaddingInlineEnd);
96
61
  background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
97
- border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
62
+ border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
98
63
  border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
99
64
  }
100
65
 
@@ -103,15 +68,7 @@
103
68
  }
104
69
 
105
70
  &.pf-m-truncate {
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
-
71
+ --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
115
72
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
116
73
  // stylelint-disable
117
74
  display: -webkit-box;
@@ -123,27 +80,10 @@
123
80
  }
124
81
  }
125
82
 
126
- .#{$expandable-section}__toggle {
127
- display: flex;
128
- column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
129
- width: var(--#{$expandable-section}__toggle--Width, initial);
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
- background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
135
- border: none;
136
- border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
137
-
138
- &:is(:hover, :focus) {
139
- --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
140
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
141
- }
142
- }
143
-
144
83
  .#{$expandable-section}__toggle-icon {
145
84
  @include pf-v6-mirror-inline-on-rtl;
146
85
 
86
+ display: inline-block;
147
87
  min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
148
88
  color: var(--#{$expandable-section}__toggle-icon--Color);
149
89
  transition: var(--#{$expandable-section}__toggle-icon--Transition);
@@ -154,14 +94,8 @@
154
94
  }
155
95
  }
156
96
 
157
- .#{$expandable-section}__toggle-text {
158
- color: var(--#{$expandable-section}__toggle-text--Color);
159
- }
160
-
161
97
  .#{$expandable-section}__content {
162
98
  max-width: var(--#{$expandable-section}__content--MaxWidth);
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);
99
+ padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
100
+ padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
167
101
  }
package/components/Toolbar/toolbar.css CHANGED
@@ -316,6 +316,7 @@
316
316
  }
317
317
  .pf-v6-c-toolbar__group.pf-m-label-group {
318
318
  flex: 1;
319
+ flex-wrap: wrap;
319
320
  column-gap: var(--pf-v6-c-toolbar__group--m-label-group--ColumnGap);
320
321
  }
321
322
  .pf-v6-c-toolbar__group.pf-m-action-group {
package/components/Toolbar/toolbar.scss CHANGED
@@ -233,6 +233,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
233
233
  // - Toolbar label group
234
234
  &.pf-m-label-group {
235
235
  flex: 1;
236
+ flex-wrap: wrap;
236
237
  column-gap: var(--#{$toolbar}__group--m-label-group--ColumnGap);
237
238
  }
238
239
 
package/components/_index.css CHANGED
@@ -6097,12 +6097,7 @@ ul) {
6097
6097
  }
6098
6098
 
6099
6099
  :where(:root, .pf-v6-c-expandable-section) {
6100
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6101
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6102
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6103
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6104
- --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
6105
- --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
6100
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6106
6101
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6107
6102
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6108
6103
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -6110,82 +6105,50 @@ ul) {
6110
6105
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6111
6106
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6112
6107
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
6113
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
6114
- --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
6115
- --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
6116
- --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6117
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
6118
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6119
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6120
6108
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6121
6109
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6110
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6111
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6112
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
6113
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6114
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6122
6115
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6116
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6123
6117
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6124
6118
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6125
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
6126
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
6127
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6128
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
6129
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
6130
- --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
6131
- --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
6132
- --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
6133
- --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
6134
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
6135
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6136
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
6137
- --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;
6138
- --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));
6139
- --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));
6140
- --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));
6141
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6142
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6143
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6144
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
6145
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6119
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
6146
6120
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6121
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6147
6122
  }
6148
6123
 
6124
+ .pf-v6-c-expandable-section {
6125
+ display: flex;
6126
+ flex-direction: column;
6127
+ gap: var(--pf-v6-c-expandable-section--Gap);
6128
+ align-items: start;
6129
+ }
6149
6130
  .pf-v6-c-expandable-section.pf-m-expanded {
6150
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
6151
6131
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
6152
6132
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
6153
- --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
6154
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
6133
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
6155
6134
  }
6156
6135
  .pf-v6-c-expandable-section.pf-m-limit-width {
6157
6136
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
6158
6137
  }
6159
6138
  .pf-v6-c-expandable-section.pf-m-display-lg {
6160
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
6161
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
6162
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
6163
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
6164
- --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
6165
- --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
6166
- --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
6167
- --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
6168
- --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
6169
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
6170
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
6171
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
6172
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
6139
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
6140
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
6141
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
6142
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
6173
6143
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6174
- border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6144
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6175
6145
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6176
6146
  }
6177
6147
  .pf-v6-c-expandable-section.pf-m-indented {
6178
6148
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
6179
6149
  }
6180
6150
  .pf-v6-c-expandable-section.pf-m-truncate {
6181
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
6182
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
6183
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
6184
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
6185
- --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
6186
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
6187
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
6188
- --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
6151
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
6189
6152
  }
6190
6153
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
6191
6154
  display: -webkit-box;
@@ -6194,24 +6157,8 @@ ul) {
6194
6157
  overflow: hidden;
6195
6158
  }
6196
6159
 
6197
- .pf-v6-c-expandable-section__toggle {
6198
- display: flex;
6199
- column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
6200
- width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
6201
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
6202
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
6203
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
6204
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
6205
- background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
6206
- border: none;
6207
- border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
6208
- }
6209
- .pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
6210
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
6211
- --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
6212
- }
6213
-
6214
6160
  .pf-v6-c-expandable-section__toggle-icon {
6161
+ display: inline-block;
6215
6162
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
6216
6163
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
6217
6164
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -6225,16 +6172,10 @@ ul) {
6225
6172
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6226
6173
  }
6227
6174
 
6228
- .pf-v6-c-expandable-section__toggle-text {
6229
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
6230
- }
6231
-
6232
6175
  .pf-v6-c-expandable-section__content {
6233
6176
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
6234
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
6235
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
6236
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
6237
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
6177
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6178
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6238
6179
  }
6239
6180
 
6240
6181
  :where(:root, .pf-v6-c-file-upload) {
@@ -19589,6 +19530,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19589
19530
  }
19590
19531
  .pf-v6-c-toolbar__group.pf-m-label-group {
19591
19532
  flex: 1;
19533
+ flex-wrap: wrap;
19592
19534
  column-gap: var(--pf-v6-c-toolbar__group--m-label-group--ColumnGap);
19593
19535
  }
19594
19536
  .pf-v6-c-toolbar__group.pf-m-action-group {
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -96,17 +96,22 @@ name: azure-sample-repo<div
96
96
  </code>
97
97
  </pre>
98
98
  <div class="pf-v6-c-expandable-section">
99
- <button
100
- type="button"
101
- class="pf-v6-c-expandable-section__toggle"
102
- aria-expanded="false"
103
- aria-controls="code-block-expandable-content"
104
- >
105
- <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
106
- <i class="fas fa-angle-right" aria-hidden="true"></i>
107
- </span>
108
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
109
- </button>
99
+ <div class="pf-v6-c-expandable-section__toggle">
100
+ <button
101
+ class="pf-v6-c-button pf-m-link"
102
+ type="button"
103
+ aria-controls="code-block-expandable-content"
104
+ >
105
+ <span class="pf-v6-c-button__icon pf-m-start">
106
+ <span
107
+ class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
108
+ >
109
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
110
+ </span>
111
+ </span>
112
+ <span class="pf-v6-c-button__text">Show more</span>
113
+ </button>
114
+ </div>
110
115
  </div>
111
116
  </div>
112
117
  </div>
@@ -160,17 +165,23 @@ name: azure-sample-repo<div
160
165
  </code>
161
166
  </pre>
162
167
  <div class="pf-v6-c-expandable-section pf-m-expanded">
163
- <button
164
- type="button"
165
- class="pf-v6-c-expandable-section__toggle"
166
- aria-expanded="true"
167
- aria-controls="code-block-expandable-expanded-content"
168
- >
169
- <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
170
- <i class="fas fa-angle-right" aria-hidden="true"></i>
171
- </span>
172
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
173
- </button>
168
+ <div class="pf-v6-c-expandable-section__toggle">
169
+ <button
170
+ class="pf-v6-c-button pf-m-link"
171
+ type="button"
172
+ aria-expanded="true"
173
+ aria-controls="code-block-expandable-expanded-content"
174
+ >
175
+ <span class="pf-v6-c-button__icon pf-m-start">
176
+ <span
177
+ class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
178
+ >
179
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
180
+ </span>
181
+ </span>
182
+ <span class="pf-v6-c-button__text">Show less</span>
183
+ </button>
184
+ </div>
174
185
  </div>
175
186
  </div>
176
187
  </div>