@patternfly/patternfly 6.0.0-alpha.20 → 6.0.0-alpha.22

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 (17) hide show
  1. package/base/_common.scss +8 -4
  2. package/base/patternfly-common.css +8 -4
  3. package/base/patternfly-variables.css +10 -3
  4. package/base/tokens/_tokens-font.scss +12 -3
  5. package/components/ExpandableSection/expandable-section.css +64 -55
  6. package/components/ExpandableSection/expandable-section.scss +72 -68
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals-theme-dark-unversioned.css +18 -7
  10. package/patternfly-base-no-globals.css +18 -7
  11. package/patternfly-base-theme-dark-unversioned.css +18 -7
  12. package/patternfly-base.css +18 -7
  13. package/patternfly-no-globals.css +82 -62
  14. package/patternfly-theme-dark-unversioned.css +82 -62
  15. package/patternfly.css +82 -62
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -811,9 +811,9 @@
811
811
  }
812
812
 
813
813
  :root {
814
- --pf-t--global--font--family--100: redhattext;
815
- --pf-t--global--font--family--200: redhatdisplay;
816
- --pf-t--global--font--family--300: redhatmono;
814
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
815
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
816
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
817
817
  --pf-t--global--font--line-height--100: 1.3;
818
818
  --pf-t--global--font--line-height--200: 1.5;
819
819
  --pf-t--global--font--weight--body--100: 400;
@@ -848,6 +848,13 @@
848
848
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
849
849
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
850
850
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
851
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
852
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
853
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
854
+ --pf-t--global--font--weight--body--legacy: 400;
855
+ --pf-t--global--font--weight--body--bold--legacy: 700;
856
+ --pf-t--global--font--weight--heading--legacy: 400;
857
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
851
858
  --pf-t--global--text-decoration--100: none;
852
859
  --pf-t--global--text-decoration--200: underline;
853
860
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1349,10 +1356,14 @@
1349
1356
  font-variant-numeric: tabular-nums;
1350
1357
  }
1351
1358
 
1352
- .pf-v5-m-vf-font {
1353
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1354
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1355
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1359
+ .pf-v5-m-legacy-font {
1360
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1361
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1362
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1363
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1364
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1365
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1366
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1356
1367
  }
1357
1368
 
1358
1369
  .pf-v5-m-dir-rtl {
package/patternfly-base-no-globals.css CHANGED
@@ -811,9 +811,9 @@
811
811
  }
812
812
 
813
813
  :root {
814
- --pf-t--global--font--family--100: redhattext;
815
- --pf-t--global--font--family--200: redhatdisplay;
816
- --pf-t--global--font--family--300: redhatmono;
814
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
815
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
816
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
817
817
  --pf-t--global--font--line-height--100: 1.3;
818
818
  --pf-t--global--font--line-height--200: 1.5;
819
819
  --pf-t--global--font--weight--body--100: 400;
@@ -848,6 +848,13 @@
848
848
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
849
849
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
850
850
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
851
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
852
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
853
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
854
+ --pf-t--global--font--weight--body--legacy: 400;
855
+ --pf-t--global--font--weight--body--bold--legacy: 700;
856
+ --pf-t--global--font--weight--heading--legacy: 400;
857
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
851
858
  --pf-t--global--text-decoration--100: none;
852
859
  --pf-t--global--text-decoration--200: underline;
853
860
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1349,10 +1356,14 @@
1349
1356
  font-variant-numeric: tabular-nums;
1350
1357
  }
1351
1358
 
1352
- .pf-v5-m-vf-font {
1353
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1354
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1355
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1359
+ .pf-v5-m-legacy-font {
1360
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1361
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1362
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1363
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1364
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1365
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1366
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1356
1367
  }
1357
1368
 
1358
1369
  .pf-v5-m-dir-rtl {
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -811,9 +811,9 @@
811
811
  }
812
812
 
813
813
  :root {
814
- --pf-t--global--font--family--100: redhattext;
815
- --pf-t--global--font--family--200: redhatdisplay;
816
- --pf-t--global--font--family--300: redhatmono;
814
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
815
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
816
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
817
817
  --pf-t--global--font--line-height--100: 1.3;
818
818
  --pf-t--global--font--line-height--200: 1.5;
819
819
  --pf-t--global--font--weight--body--100: 400;
@@ -848,6 +848,13 @@
848
848
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
849
849
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
850
850
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
851
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
852
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
853
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
854
+ --pf-t--global--font--weight--body--legacy: 400;
855
+ --pf-t--global--font--weight--body--bold--legacy: 700;
856
+ --pf-t--global--font--weight--heading--legacy: 400;
857
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
851
858
  --pf-t--global--text-decoration--100: none;
852
859
  --pf-t--global--text-decoration--200: underline;
853
860
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1349,10 +1356,14 @@
1349
1356
  font-variant-numeric: tabular-nums;
1350
1357
  }
1351
1358
 
1352
- .pf-v5-m-vf-font {
1353
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1354
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1355
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1359
+ .pf-v5-m-legacy-font {
1360
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1361
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1362
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1363
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1364
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1365
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1366
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1356
1367
  }
1357
1368
 
1358
1369
  .pf-v5-m-dir-rtl {
package/patternfly-base.css CHANGED
@@ -811,9 +811,9 @@
811
811
  }
812
812
 
813
813
  :root {
814
- --pf-t--global--font--family--100: redhattext;
815
- --pf-t--global--font--family--200: redhatdisplay;
816
- --pf-t--global--font--family--300: redhatmono;
814
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
815
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
816
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
817
817
  --pf-t--global--font--line-height--100: 1.3;
818
818
  --pf-t--global--font--line-height--200: 1.5;
819
819
  --pf-t--global--font--weight--body--100: 400;
@@ -848,6 +848,13 @@
848
848
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
849
849
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
850
850
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
851
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
852
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
853
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
854
+ --pf-t--global--font--weight--body--legacy: 400;
855
+ --pf-t--global--font--weight--body--bold--legacy: 700;
856
+ --pf-t--global--font--weight--heading--legacy: 400;
857
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
851
858
  --pf-t--global--text-decoration--100: none;
852
859
  --pf-t--global--text-decoration--200: underline;
853
860
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1349,10 +1356,14 @@
1349
1356
  font-variant-numeric: tabular-nums;
1350
1357
  }
1351
1358
 
1352
- .pf-v5-m-vf-font {
1353
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1354
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1355
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1359
+ .pf-v5-m-legacy-font {
1360
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1361
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1362
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1363
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1364
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1365
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1366
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1356
1367
  }
1357
1368
 
1358
1369
  .pf-v5-m-dir-rtl {
package/patternfly-no-globals.css CHANGED
@@ -873,9 +873,9 @@
873
873
  }
874
874
 
875
875
  :root {
876
- --pf-t--global--font--family--100: redhattext;
877
- --pf-t--global--font--family--200: redhatdisplay;
878
- --pf-t--global--font--family--300: redhatmono;
876
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
877
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
878
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
879
879
  --pf-t--global--font--line-height--100: 1.3;
880
880
  --pf-t--global--font--line-height--200: 1.5;
881
881
  --pf-t--global--font--weight--body--100: 400;
@@ -910,6 +910,13 @@
910
910
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
911
911
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
912
912
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
913
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
914
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
915
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
916
+ --pf-t--global--font--weight--body--legacy: 400;
917
+ --pf-t--global--font--weight--body--bold--legacy: 700;
918
+ --pf-t--global--font--weight--heading--legacy: 400;
919
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
913
920
  --pf-t--global--text-decoration--100: none;
914
921
  --pf-t--global--text-decoration--200: underline;
915
922
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1411,10 +1418,14 @@
1411
1418
  font-variant-numeric: tabular-nums;
1412
1419
  }
1413
1420
 
1414
- .pf-v5-m-vf-font {
1415
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1416
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1417
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1421
+ .pf-v5-m-legacy-font {
1422
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1423
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1424
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1425
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1426
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1427
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1428
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1418
1429
  }
1419
1430
 
1420
1431
  .pf-v5-m-dir-rtl {
@@ -14934,53 +14945,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14934
14945
  justify-content: center;
14935
14946
  }
14936
14947
 
14937
- .pf-v5-c-expandable-section {
14938
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
14939
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
14940
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
14941
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
14942
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
14943
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
14944
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
14945
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
14946
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
14947
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
14948
+ :root {
14949
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
14950
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
14951
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
14952
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
14953
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
14954
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
14955
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
14956
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
14957
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
14948
14958
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
14959
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
14949
14960
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
14950
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
14961
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
14951
14962
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
14952
14963
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
14953
14964
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
14954
14965
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
14955
14966
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
14956
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
14957
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
14967
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
14968
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
14969
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
14970
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
14958
14971
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
14959
14972
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
14960
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
14961
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
14962
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
14963
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
14964
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
14965
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
14966
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
14967
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
14968
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
14969
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
14970
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
14971
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
14972
- --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
14973
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14974
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
14975
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
14976
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
14977
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
14978
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
14979
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
14980
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
14981
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
14982
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
14983
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
14984
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
14985
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
14986
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
14987
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
14988
+ --pf-v5-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;
14989
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
14990
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
14991
+ --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
14992
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
14993
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
14994
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
14995
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
14996
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
14973
14997
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
14974
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
14975
14998
  }
14999
+
14976
15000
  .pf-v5-c-expandable-section.pf-m-expanded {
14977
15001
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
14978
15002
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
14979
15003
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
14980
15004
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
14981
- }
14982
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
14983
- --pf-v5-c-expandable-section__content--MarginTop: 0;
15005
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
14984
15006
  }
14985
15007
  .pf-v5-c-expandable-section.pf-m-limit-width {
14986
15008
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -14990,31 +15012,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14990
15012
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
14991
15013
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
14992
15014
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
15015
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
15016
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
15017
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
15018
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
15019
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
14993
15020
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
14994
15021
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
14995
15022
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
14996
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
14997
- position: relative;
14998
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
14999
- }
15000
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15001
- position: absolute;
15002
- inset-block-start: 0;
15003
- inset-block-end: 0;
15004
- inset-inline-start: 0;
15005
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15006
- content: "";
15007
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
15023
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
15024
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
15025
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
15026
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
15008
15027
  }
15009
15028
  .pf-v5-c-expandable-section.pf-m-indented {
15010
15029
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15011
15030
  }
15012
15031
  .pf-v5-c-expandable-section.pf-m-truncate {
15013
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15014
15032
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15015
15033
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15016
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15017
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
15034
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
15035
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15036
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
15037
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
15038
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
15039
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
15018
15040
  }
15019
15041
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15020
15042
  display: -webkit-box;
@@ -15022,29 +15044,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15022
15044
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15023
15045
  overflow: hidden;
15024
15046
  }
15025
- .pf-v5-c-expandable-section.pf-m-detached {
15026
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15027
- }
15028
15047
 
15029
15048
  .pf-v5-c-expandable-section__toggle {
15030
15049
  display: flex;
15050
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
15051
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
15031
15052
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15032
15053
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15033
15054
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15034
15055
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15035
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15036
15056
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15037
15057
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15038
15058
  border: none;
15059
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15039
15060
  }
15040
15061
  .pf-v5-c-expandable-section__toggle:hover {
15041
15062
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15063
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15042
15064
  }
15043
15065
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15044
15066
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15067
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15045
15068
  }
15046
15069
  .pf-v5-c-expandable-section__toggle:focus {
15047
15070
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15071
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15048
15072
  }
15049
15073
 
15050
15074
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15061,16 +15085,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15061
15085
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15062
15086
  }
15063
15087
 
15064
- .pf-v5-c-expandable-section__toggle-text {
15065
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15066
- }
15067
-
15068
15088
  .pf-v5-c-expandable-section__content {
15069
15089
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15090
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15070
15091
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15071
15092
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15072
15093
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15073
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15074
15094
  }
15075
15095
 
15076
15096
  .pf-v5-c-file-upload {