@patternfly/patternfly 6.0.0-alpha.21 → 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 (9) hide show
  1. package/components/ExpandableSection/expandable-section.css +64 -55
  2. package/components/ExpandableSection/expandable-section.scss +72 -68
  3. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +64 -55
  6. package/patternfly-theme-dark-unversioned.css +64 -55
  7. package/patternfly.css +64 -55
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -14945,53 +14945,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14945
14945
  justify-content: center;
14946
14946
  }
14947
14947
 
14948
- .pf-v5-c-expandable-section {
14949
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
14950
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
14951
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
14952
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
14953
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
14954
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
14955
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
14956
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
14957
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
14958
- --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);
14959
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));
14960
14960
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
14961
- --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);
14962
14962
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
14963
14963
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
14964
14964
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
14965
14965
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
14966
14966
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
14967
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
14968
- --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);
14969
14971
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
14970
14972
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
14971
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
14972
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
14973
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
14974
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
14975
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
14976
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
14977
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
14978
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
14979
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
14980
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
14981
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
14982
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
14983
- --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);
14984
14997
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
14985
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
14986
14998
  }
14999
+
14987
15000
  .pf-v5-c-expandable-section.pf-m-expanded {
14988
15001
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
14989
15002
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
14990
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);
14991
15004
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
14992
- }
14993
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
14994
- --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);
14995
15006
  }
14996
15007
  .pf-v5-c-expandable-section.pf-m-limit-width {
14997
15008
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -15001,31 +15012,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15001
15012
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
15002
15013
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
15003
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);
15004
15020
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
15005
15021
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
15006
15022
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
15007
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
15008
- position: relative;
15009
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
15010
- }
15011
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15012
- position: absolute;
15013
- inset-block-start: 0;
15014
- inset-block-end: 0;
15015
- inset-inline-start: 0;
15016
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15017
- content: "";
15018
- 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);
15019
15027
  }
15020
15028
  .pf-v5-c-expandable-section.pf-m-indented {
15021
15029
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15022
15030
  }
15023
15031
  .pf-v5-c-expandable-section.pf-m-truncate {
15024
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15025
15032
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15026
15033
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15027
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15028
- --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;
15029
15040
  }
15030
15041
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15031
15042
  display: -webkit-box;
@@ -15033,29 +15044,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15033
15044
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15034
15045
  overflow: hidden;
15035
15046
  }
15036
- .pf-v5-c-expandable-section.pf-m-detached {
15037
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15038
- }
15039
15047
 
15040
15048
  .pf-v5-c-expandable-section__toggle {
15041
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);
15042
15052
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15043
15053
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15044
15054
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15045
15055
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15046
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15047
15056
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15048
15057
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15049
15058
  border: none;
15059
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15050
15060
  }
15051
15061
  .pf-v5-c-expandable-section__toggle:hover {
15052
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);
15053
15064
  }
15054
15065
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15055
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);
15056
15068
  }
15057
15069
  .pf-v5-c-expandable-section__toggle:focus {
15058
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);
15059
15072
  }
15060
15073
 
15061
15074
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15072,16 +15085,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15072
15085
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15073
15086
  }
15074
15087
 
15075
- .pf-v5-c-expandable-section__toggle-text {
15076
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15077
- }
15078
-
15079
15088
  .pf-v5-c-expandable-section__content {
15080
15089
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15090
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15081
15091
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15082
15092
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15083
15093
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15084
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15085
15094
  }
15086
15095
 
15087
15096
  .pf-v5-c-file-upload {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -15061,53 +15061,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15061
15061
  justify-content: center;
15062
15062
  }
15063
15063
 
15064
- .pf-v5-c-expandable-section {
15065
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
15066
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15067
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15068
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15069
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
15070
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
15071
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
15072
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
15073
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
15074
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
15064
+ :root {
15065
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
15066
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15067
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15068
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15069
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15070
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15071
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15072
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15073
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15075
15074
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15075
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15076
15076
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
15077
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
15077
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15078
15078
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
15079
15079
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
15080
15080
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15081
15081
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15082
15082
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15083
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
15084
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
15083
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15084
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15085
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
15086
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
15085
15087
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
15086
15088
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
15087
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
15088
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
15089
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15090
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
15091
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
15092
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
15093
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
15094
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
15095
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
15096
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
15097
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
15098
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
15099
- --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));
15089
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15090
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
15091
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
15092
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
15093
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
15094
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
15095
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
15096
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
15097
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
15098
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15099
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15100
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15101
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
15102
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
15103
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
15104
+ --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;
15105
+ --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));
15106
+ --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));
15107
+ --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));
15108
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
15109
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
15110
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
15111
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
15112
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15100
15113
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
15101
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
15102
15114
  }
15115
+
15103
15116
  .pf-v5-c-expandable-section.pf-m-expanded {
15104
15117
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15105
15118
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15106
15119
  --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);
15107
15120
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
15108
- }
15109
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
15110
- --pf-v5-c-expandable-section__content--MarginTop: 0;
15121
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
15111
15122
  }
15112
15123
  .pf-v5-c-expandable-section.pf-m-limit-width {
15113
15124
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -15117,31 +15128,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15117
15128
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
15118
15129
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
15119
15130
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
15131
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
15132
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
15133
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
15134
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
15135
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
15120
15136
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
15121
15137
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
15122
15138
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
15123
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
15124
- position: relative;
15125
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
15126
- }
15127
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15128
- position: absolute;
15129
- inset-block-start: 0;
15130
- inset-block-end: 0;
15131
- inset-inline-start: 0;
15132
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15133
- content: "";
15134
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
15139
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
15140
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
15141
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
15142
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
15135
15143
  }
15136
15144
  .pf-v5-c-expandable-section.pf-m-indented {
15137
15145
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15138
15146
  }
15139
15147
  .pf-v5-c-expandable-section.pf-m-truncate {
15140
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15141
15148
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15142
15149
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15143
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15144
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
15150
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
15151
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15152
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
15153
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
15154
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
15155
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
15145
15156
  }
15146
15157
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15147
15158
  display: -webkit-box;
@@ -15149,29 +15160,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15149
15160
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15150
15161
  overflow: hidden;
15151
15162
  }
15152
- .pf-v5-c-expandable-section.pf-m-detached {
15153
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15154
- }
15155
15163
 
15156
15164
  .pf-v5-c-expandable-section__toggle {
15157
15165
  display: flex;
15166
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
15167
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
15158
15168
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15159
15169
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15160
15170
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15161
15171
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15162
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15163
15172
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15164
15173
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15165
15174
  border: none;
15175
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15166
15176
  }
15167
15177
  .pf-v5-c-expandable-section__toggle:hover {
15168
15178
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15179
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15169
15180
  }
15170
15181
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15171
15182
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15183
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15172
15184
  }
15173
15185
  .pf-v5-c-expandable-section__toggle:focus {
15174
15186
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15187
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15175
15188
  }
15176
15189
 
15177
15190
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15188,16 +15201,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15188
15201
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15189
15202
  }
15190
15203
 
15191
- .pf-v5-c-expandable-section__toggle-text {
15192
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15193
- }
15194
-
15195
15204
  .pf-v5-c-expandable-section__content {
15196
15205
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15206
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15197
15207
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15198
15208
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15199
15209
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15200
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15201
15210
  }
15202
15211
 
15203
15212
  .pf-v5-c-file-upload {
package/patternfly.css CHANGED
@@ -15061,53 +15061,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15061
15061
  justify-content: center;
15062
15062
  }
15063
15063
 
15064
- .pf-v5-c-expandable-section {
15065
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
15066
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15067
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15068
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15069
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
15070
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
15071
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
15072
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
15073
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
15074
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
15064
+ :root {
15065
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
15066
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15067
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15068
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15069
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15070
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15071
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15072
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15073
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15075
15074
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15075
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15076
15076
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
15077
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
15077
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15078
15078
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
15079
15079
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
15080
15080
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15081
15081
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15082
15082
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15083
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
15084
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
15083
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15084
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15085
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
15086
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
15085
15087
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
15086
15088
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
15087
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
15088
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
15089
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15090
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
15091
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
15092
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
15093
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
15094
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
15095
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
15096
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
15097
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
15098
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
15099
- --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));
15089
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15090
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
15091
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
15092
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
15093
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
15094
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
15095
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
15096
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
15097
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
15098
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15099
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15100
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15101
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
15102
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
15103
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
15104
+ --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;
15105
+ --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));
15106
+ --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));
15107
+ --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));
15108
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
15109
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
15110
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
15111
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
15112
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15100
15113
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
15101
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
15102
15114
  }
15115
+
15103
15116
  .pf-v5-c-expandable-section.pf-m-expanded {
15104
15117
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15105
15118
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15106
15119
  --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);
15107
15120
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
15108
- }
15109
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
15110
- --pf-v5-c-expandable-section__content--MarginTop: 0;
15121
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
15111
15122
  }
15112
15123
  .pf-v5-c-expandable-section.pf-m-limit-width {
15113
15124
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -15117,31 +15128,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15117
15128
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
15118
15129
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
15119
15130
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
15131
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
15132
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
15133
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
15134
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
15135
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
15120
15136
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
15121
15137
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
15122
15138
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
15123
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
15124
- position: relative;
15125
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
15126
- }
15127
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15128
- position: absolute;
15129
- inset-block-start: 0;
15130
- inset-block-end: 0;
15131
- inset-inline-start: 0;
15132
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15133
- content: "";
15134
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
15139
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
15140
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
15141
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
15142
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
15135
15143
  }
15136
15144
  .pf-v5-c-expandable-section.pf-m-indented {
15137
15145
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15138
15146
  }
15139
15147
  .pf-v5-c-expandable-section.pf-m-truncate {
15140
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15141
15148
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15142
15149
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15143
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15144
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
15150
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
15151
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15152
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
15153
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
15154
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
15155
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
15145
15156
  }
15146
15157
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15147
15158
  display: -webkit-box;
@@ -15149,29 +15160,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15149
15160
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15150
15161
  overflow: hidden;
15151
15162
  }
15152
- .pf-v5-c-expandable-section.pf-m-detached {
15153
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15154
- }
15155
15163
 
15156
15164
  .pf-v5-c-expandable-section__toggle {
15157
15165
  display: flex;
15166
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
15167
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
15158
15168
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15159
15169
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15160
15170
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15161
15171
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15162
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15163
15172
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15164
15173
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15165
15174
  border: none;
15175
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15166
15176
  }
15167
15177
  .pf-v5-c-expandable-section__toggle:hover {
15168
15178
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15179
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15169
15180
  }
15170
15181
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15171
15182
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15183
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15172
15184
  }
15173
15185
  .pf-v5-c-expandable-section__toggle:focus {
15174
15186
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15187
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15175
15188
  }
15176
15189
 
15177
15190
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15188,16 +15201,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15188
15201
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15189
15202
  }
15190
15203
 
15191
- .pf-v5-c-expandable-section__toggle-text {
15192
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15193
- }
15194
-
15195
15204
  .pf-v5-c-expandable-section__content {
15196
15205
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15206
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15197
15207
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15198
15208
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15199
15209
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15200
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15201
15210
  }
15202
15211
 
15203
15212
  .pf-v5-c-file-upload {