@patternfly/patternfly 6.0.0-alpha.222 → 6.0.0-alpha.224

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 (18) hide show
  1. package/components/Banner/banner.css +2 -11
  2. package/components/Banner/banner.scss +2 -15
  3. package/components/Content/content.css +5 -3
  4. package/components/Content/content.scss +5 -3
  5. package/components/ExpandableSection/expandable-section.css +25 -84
  6. package/components/ExpandableSection/expandable-section.scss +24 -90
  7. package/components/Timestamp/timestamp.css +3 -1
  8. package/components/Timestamp/timestamp.scss +4 -1
  9. package/components/_index.css +35 -99
  10. package/docs/components/CodeBlock/examples/CodeBlock.md +33 -22
  11. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  12. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +62 -54
  13. package/docs/components/Timestamp/examples/Timestamp.md +7 -0
  14. package/package.json +5 -5
  15. package/patternfly-no-globals.css +35 -99
  16. package/patternfly.css +35 -99
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -1094,9 +1094,7 @@
1094
1094
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1095
1095
  --pf-v6-c-banner--link--TextDecoration: underline;
1096
1096
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
1097
- --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
1098
- --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
1099
- --pf-v6-c-banner--link--disabled--TextDecoration: none;
1097
+ --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
1100
1098
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
1101
1099
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
1102
1100
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -1208,25 +1206,18 @@
1208
1206
  }
1209
1207
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
1210
1208
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
1211
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
1212
1209
  }
1213
1210
  .pf-v6-c-banner a.pf-m-disabled {
1214
1211
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
1215
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
1216
1212
  cursor: not-allowed;
1217
1213
  }
1218
1214
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1219
1215
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
1220
- --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1216
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1221
1217
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1222
1218
  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
1223
1219
  }
1224
- .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover {
1225
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
1226
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
1227
- }
1228
1220
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
1229
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
1230
1221
  cursor: not-allowed;
1231
1222
  }
1232
1223
 
@@ -2998,8 +2989,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2998
2989
  --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2999
2990
  --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
3000
2991
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
3001
- --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
3002
- --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
2992
+ --pf-v6-c-content--dl--GridTemplateColumns--dt: 12ch;
2993
+ --pf-v6-c-content--dl--GridTemplateColumns--dd: 1fr;
2994
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
2995
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
3003
2996
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
3004
2997
  --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
3005
2998
  --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
@@ -3176,7 +3169,7 @@ ul) {
3176
3169
  }
3177
3170
  @media screen and (min-width: 36rem) {
3178
3171
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
3179
- grid-template: auto/auto 1fr;
3172
+ grid-template: auto/var(--pf-v6-c-content--dl--GridTemplateColumns--dt) var(--pf-v6-c-content--dl--GridTemplateColumns--dd);
3180
3173
  grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
3181
3174
  grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
3182
3175
  }
@@ -6097,12 +6090,7 @@ ul) {
6097
6090
  }
6098
6091
 
6099
6092
  :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));
6093
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6106
6094
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6107
6095
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6108
6096
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -6110,82 +6098,50 @@ ul) {
6110
6098
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6111
6099
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6112
6100
  --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
6101
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6121
6102
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6103
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6104
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6105
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
6106
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6107
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6122
6108
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6109
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6123
6110
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6124
6111
  --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);
6112
+ --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
6113
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6114
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6147
6115
  }
6148
6116
 
6117
+ .pf-v6-c-expandable-section {
6118
+ display: flex;
6119
+ flex-direction: column;
6120
+ gap: var(--pf-v6-c-expandable-section--Gap);
6121
+ align-items: start;
6122
+ }
6149
6123
  .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
6124
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
6152
6125
  --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);
6126
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
6155
6127
  }
6156
6128
  .pf-v6-c-expandable-section.pf-m-limit-width {
6157
6129
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
6158
6130
  }
6159
6131
  .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);
6132
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
6133
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
6134
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
6135
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
6173
6136
  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);
6137
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6175
6138
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6176
6139
  }
6177
6140
  .pf-v6-c-expandable-section.pf-m-indented {
6178
6141
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
6179
6142
  }
6180
6143
  .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;
6144
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
6189
6145
  }
6190
6146
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
6191
6147
  display: -webkit-box;
@@ -6194,24 +6150,8 @@ ul) {
6194
6150
  overflow: hidden;
6195
6151
  }
6196
6152
 
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
6153
  .pf-v6-c-expandable-section__toggle-icon {
6154
+ display: inline-block;
6215
6155
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
6216
6156
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
6217
6157
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -6225,16 +6165,10 @@ ul) {
6225
6165
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6226
6166
  }
6227
6167
 
6228
- .pf-v6-c-expandable-section__toggle-text {
6229
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
6230
- }
6231
-
6232
6168
  .pf-v6-c-expandable-section__content {
6233
6169
  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);
6170
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6171
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6238
6172
  }
6239
6173
 
6240
6174
  :where(:root, .pf-v6-c-file-upload) {
@@ -19016,11 +18950,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19016
18950
 
19017
18951
  :where(:root, .pf-v6-c-timestamp) {
19018
18952
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
19019
- --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
18953
+ --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
19020
18954
  --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
19021
18955
  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
19022
18956
  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
19023
18957
  --pf-v6-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
18958
+ --pf-v6-c-timestamp--m-help-text--Color: var(--pf-t--global--text--color--subtle);
19024
18959
  --pf-v6-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
19025
18960
  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
19026
18961
  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
@@ -19033,6 +18968,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19033
18968
  outline-offset: var(--pf-v6-c-timestamp--OutlineOffset);
19034
18969
  }
19035
18970
  .pf-v6-c-timestamp.pf-m-help-text {
18971
+ --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
19036
18972
  text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
19037
18973
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
19038
18974
  cursor: pointer;
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>
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -8,16 +8,16 @@ cssPrefix: pf-v6-c-expandable-section
8
8
 
9
9
  ```html
10
10
  <div class="pf-v6-c-expandable-section">
11
- <button
12
- type="button"
13
- class="pf-v6-c-expandable-section__toggle"
14
- aria-expanded="false"
15
- >
16
- <span class="pf-v6-c-expandable-section__toggle-icon">
17
- <i class="fas fa-angle-right" aria-hidden="true"></i>
18
- </span>
19
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
20
- </button>
11
+ <div class="pf-v6-c-expandable-section__toggle">
12
+ <button class="pf-v6-c-button pf-m-link" type="button">
13
+ <span class="pf-v6-c-button__icon pf-m-start">
14
+ <span class="pf-v6-c-expandable-section__toggle-icon">
15
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16
+ </span>
17
+ </span>
18
+ <span class="pf-v6-c-button__text">Show more</span>
19
+ </button>
20
+ </div>
21
21
  <div
22
22
  class="pf-v6-c-expandable-section__content"
23
23
  hidden
@@ -30,16 +30,16 @@ cssPrefix: pf-v6-c-expandable-section
30
30
 
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
- <button
34
- type="button"
35
- class="pf-v6-c-expandable-section__toggle"
36
- aria-expanded="true"
37
- >
38
- <span class="pf-v6-c-expandable-section__toggle-icon">
39
- <i class="fas fa-angle-right" aria-hidden="true"></i>
40
- </span>
41
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
42
- </button>
33
+ <div class="pf-v6-c-expandable-section__toggle">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
35
+ <span class="pf-v6-c-button__icon pf-m-start">
36
+ <span class="pf-v6-c-expandable-section__toggle-icon">
37
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
38
+ </span>
39
+ </span>
40
+ <span class="pf-v6-c-button__text">Show less</span>
41
+ </button>
42
+ </div>
43
43
  <div
44
44
  class="pf-v6-c-expandable-section__content"
45
45
  >This content is visible only when the component is expanded.</div>
@@ -51,16 +51,16 @@ cssPrefix: pf-v6-c-expandable-section
51
51
 
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
- <button
55
- type="button"
56
- class="pf-v6-c-expandable-section__toggle"
57
- aria-expanded="true"
58
- >
59
- <span class="pf-v6-c-expandable-section__toggle-icon">
60
- <i class="fas fa-angle-right" aria-hidden="true"></i>
61
- </span>
62
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
63
- </button>
54
+ <div class="pf-v6-c-expandable-section__toggle">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
56
+ <span class="pf-v6-c-button__icon pf-m-start">
57
+ <span class="pf-v6-c-expandable-section__toggle-icon">
58
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
59
+ </span>
60
+ </span>
61
+ <span class="pf-v6-c-button__text">Show less</span>
62
+ </button>
63
+ </div>
64
64
  <div
65
65
  class="pf-v6-c-expandable-section__content"
66
66
  >This content is visible only when the component is expanded.</div>
@@ -72,16 +72,16 @@ cssPrefix: pf-v6-c-expandable-section
72
72
 
73
73
  ```html
74
74
  <div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
75
- <button
76
- type="button"
77
- class="pf-v6-c-expandable-section__toggle"
78
- aria-expanded="false"
79
- >
80
- <span class="pf-v6-c-expandable-section__toggle-icon">
81
- <i class="fas fa-angle-right" aria-hidden="true"></i>
82
- </span>
83
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
84
- </button>
75
+ <div class="pf-v6-c-expandable-section__toggle">
76
+ <button class="pf-v6-c-button pf-m-link" type="button">
77
+ <span class="pf-v6-c-button__icon pf-m-start">
78
+ <span class="pf-v6-c-expandable-section__toggle-icon">
79
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
80
+ </span>
81
+ </span>
82
+ <span class="pf-v6-c-button__text">Show more</span>
83
+ </button>
84
+ </div>
85
85
  <div
86
86
  class="pf-v6-c-expandable-section__content"
87
87
  hidden
@@ -96,16 +96,16 @@ cssPrefix: pf-v6-c-expandable-section
96
96
  <div
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
- <button
100
- type="button"
101
- class="pf-v6-c-expandable-section__toggle"
102
- aria-expanded="true"
103
- >
104
- <span class="pf-v6-c-expandable-section__toggle-icon">
105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
106
- </span>
107
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
108
- </button>
99
+ <div class="pf-v6-c-expandable-section__toggle">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
101
+ <span class="pf-v6-c-button__icon pf-m-start">
102
+ <span class="pf-v6-c-expandable-section__toggle-icon">
103
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
104
+ </span>
105
+ </span>
106
+ <span class="pf-v6-c-button__text">Show less</span>
107
+ </button>
108
+ </div>
109
109
  <div
110
110
  class="pf-v6-c-expandable-section__content"
111
111
  >This content is visible only when the component is expanded.</div>
@@ -119,16 +119,16 @@ cssPrefix: pf-v6-c-expandable-section
119
119
  <div
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
- <button
123
- type="button"
124
- class="pf-v6-c-expandable-section__toggle"
125
- aria-expanded="true"
126
- >
127
- <span class="pf-v6-c-expandable-section__toggle-icon">
128
- <i class="fas fa-angle-right" aria-hidden="true"></i>
129
- </span>
130
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
131
- </button>
122
+ <div class="pf-v6-c-expandable-section__toggle">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
124
+ <span class="pf-v6-c-button__icon pf-m-start">
125
+ <span class="pf-v6-c-expandable-section__toggle-icon">
126
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
127
+ </span>
128
+ </span>
129
+ <span class="pf-v6-c-button__text">Show less</span>
130
+ </button>
131
+ </div>
132
132
  <div
133
133
  class="pf-v6-c-expandable-section__content"
134
134
  >This content is visible only when the component is expanded.</div>
@@ -151,17 +151,23 @@ cssPrefix: pf-v6-c-expandable-section
151
151
 
152
152
  <div class="pf-v6-l-stack__item">
153
153
  <div class="pf-v6-c-expandable-section pf-m-expanded">
154
- <button
155
- type="button"
156
- class="pf-v6-c-expandable-section__toggle"
157
- aria-expanded="true"
158
- aria-controls="detached-toggle-content"
159
- >
160
- <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
162
- </span>
163
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
164
- </button>
154
+ <div class="pf-v6-c-expandable-section__toggle">
155
+ <button
156
+ class="pf-v6-c-button pf-m-link"
157
+ type="button"
158
+ aria-expanded="true"
159
+ aria-controls="detached-toggle-content"
160
+ >
161
+ <span class="pf-v6-c-button__icon pf-m-start">
162
+ <span
163
+ class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
+ >
165
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ <span class="pf-v6-c-button__text">Show less</span>
169
+ </button>
170
+ </div>
165
171
  </div>
166
172
  </div>
167
173
  </div>
@@ -175,13 +181,11 @@ cssPrefix: pf-v6-c-expandable-section
175
181
  <div
176
182
  class="pf-v6-c-expandable-section__content"
177
183
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
178
- <button
179
- type="button"
180
- class="pf-v6-c-expandable-section__toggle"
181
- aria-expanded="false"
182
- >
183
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
184
- </button>
184
+ <div class="pf-v6-c-expandable-section__toggle">
185
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
186
+ <span class="pf-v6-c-button__text">Show more</span>
187
+ </button>
188
+ </div>
185
189
  </div>
186
190
 
187
191
  ```
@@ -193,13 +197,15 @@ cssPrefix: pf-v6-c-expandable-section
193
197
  <div
194
198
  class="pf-v6-c-expandable-section__content"
195
199
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
196
- <button
197
- type="button"
198
- class="pf-v6-c-expandable-section__toggle"
199
- aria-expanded="true"
200
- >
201
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
202
- </button>
200
+ <div class="pf-v6-c-expandable-section__toggle">
201
+ <button
202
+ class="pf-v6-c-button pf-m-inline pf-m-link"
203
+ type="button"
204
+ aria-expanded="true"
205
+ >
206
+ <span class="pf-v6-c-button__text">Show less</span>
207
+ </button>
208
+ </div>
203
209
  </div>
204
210
 
205
211
  ```
@@ -210,20 +216,19 @@ cssPrefix: pf-v6-c-expandable-section
210
216
 
211
217
  | Attribute | Applied to | Outcome |
212
218
  | -- | -- | -- |
213
- | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
214
- | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
219
+ | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. **Required** |
220
+ | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates the the expandable section content is hidden. **Required** |
215
221
  | `hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
216
222
  | `aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
217
- | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
218
- | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle`. **Required** |
223
+ | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Identifies the element controlled by the toggle button. **Required** |
224
+ | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle .pf-v6-c-button`. **Required** |
219
225
 
220
226
  ### Usage
221
227
 
222
228
  | Class | Applied to | Outcome |
223
229
  | -- | -- | -- |
224
230
  | `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
225
- | `.pf-v6-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
226
- | `.pf-v6-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
231
+ | `.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. **Required** |
227
232
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
228
233
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
229
234
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |