@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.30

package/components/ExpandableSection/expandable-section.css

@@ -1,50 +1,61 @@
-.pf-v5-c-expandable-section {
-  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
-  --pf-v5-c-expandable-section__toggle--MarginTop: 0;
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
+:root {
+  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
   --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
+  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
-  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__content--MaxWidth: auto;
   --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
-  --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
-  --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --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));
+  --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --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;
+  --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));
+  --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));
+  --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));
+  --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
 }
+
 .pf-v5-c-expandable-section.pf-m-expanded {
   --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --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);
   --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
-}
-.pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__content--MarginTop: 0;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-limit-width {
   --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -54,31 +65,31 @@
   --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
   --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
   --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
+  --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
+  --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
   --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
   --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
-  position: relative;
-  box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
-}
-.pf-v5-c-expandable-section.pf-m-display-lg::after {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
-  content: "";
-  background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
+  background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
+  border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
+  border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-indented {
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
 }
 .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
   --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
   --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-v5-c-expandable-section__content--PaddingTop: 0;
+  --pf-v5-c-expandable-section__content--PaddingRight: 0;
+  --pf-v5-c-expandable-section__content--PaddingBottom: 0;
+  --pf-v5-c-expandable-section__content--PaddingLeft: 0;
 }
 .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
   display: -webkit-box;
@@ -86,26 +97,31 @@
   -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
-.pf-v5-c-expandable-section.pf-m-detached {
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
-}
 
 .pf-v5-c-expandable-section__toggle {
   display: flex;
-  padding: var(--pf-v5-c-expandable-section__toggle--PaddingTop) var(--pf-v5-c-expandable-section__toggle--PaddingRight) var(--pf-v5-c-expandable-section__toggle--PaddingBottom) var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
-  margin-top: var(--pf-v5-c-expandable-section__toggle--MarginTop);
+  column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
+  width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
+  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
   color: var(--pf-v5-c-expandable-section__toggle--Color);
   background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
 }
 .pf-v5-c-expandable-section__toggle:hover {
   --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
+  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
 }
 .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
   --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
+  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
 }
 .pf-v5-c-expandable-section__toggle:focus {
   --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
 }
 
 .pf-v5-c-expandable-section__toggle-icon {
@@ -114,18 +130,18 @@
   transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
 }
-.pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
-  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
+  scale: -1 1;
 }
 
-.pf-v5-c-expandable-section__toggle-text {
-  margin-left: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
+.pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
+  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }
 
 .pf-v5-c-expandable-section__content {
   max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
-  padding-right: var(--pf-v5-c-expandable-section__content--PaddingRight);
-  padding-bottom: var(--pf-v5-c-expandable-section__content--PaddingBottom);
-  padding-left: var(--pf-v5-c-expandable-section__content--PaddingLeft);
-  margin-top: var(--pf-v5-c-expandable-section__content--MarginTop);
+  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -1,70 +1,78 @@
 // @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$expandable-section} {
+:root {
   // Toggle
-  --#{$expandable-section}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingLeft: 0;
-  --#{$expandable-section}__toggle--MarginTop: 0;
-  --#{$expandable-section}__toggle--Color: var(--#{$pf-global}--link--Color);
-  --#{$expandable-section}__toggle--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--active--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--m-expanded--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--Color: var(--pf-t--global--color--brand--default);
+  --#{$expandable-section}__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}__toggle--active--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
   --#{$expandable-section}__toggle--BackgroundColor: transparent;
-
+  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
+  
   // Toggle icon
   --#{$expandable-section}__toggle-icon--MinWidth: 1em;
-  --#{$expandable-section}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$expandable-section}__toggle-icon--Rotate: 0;
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-
-  // Toggle text
-  --#{$expandable-section}__toggle-text--MarginLeft: calc(var(--#{$pf-global}--spacer--xs) + var(--#{$pf-global}--spacer--sm));
-
+  
   // Content
-  --#{$expandable-section}__content--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--MaxWidth: auto;
-
+  
   // Limit Width
   --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
+  
+  // Large / Disclosure
+  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
+  --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$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;
 
-  // Large
-  --#{$expandable-section}--m-display-lg--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__content--MarginTop: 0;
-  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg--after--BackgroundColor: transparent;
-  --#{$expandable-section}--m-display-lg--after--Width: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
 
   // Indented
-  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}__toggle-text--MarginLeft) + var(--#{$expandable-section}__toggle-icon--MinWidth));
-
+  --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
+  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
+  --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
+  
   // Truncate
+  --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}--m-truncate__content--LineClamp: 3;
-  --#{$expandable-section}--m-truncate__toggle--MarginTop: var(--#{$pf-global}--spacer--xs);
-
+}
 
+.#{$expandable-section} {
   &.pf-m-expanded {
     --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
-  }
-
-  &.pf-m-detached,
-  &.pf-m-truncate {
-    --#{$expandable-section}__content--MarginTop: 0;
+    --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
   }
 
   &.pf-m-limit-width {
@@ -76,23 +84,19 @@
     --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
     --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
     --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
+    --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
+    --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
+    --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
+    --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
+    --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
     --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
     --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
     --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
-    --#{$expandable-section}__content--MarginTop: var(--#{$expandable-section}--m-display-lg__content--MarginTop);
-
-    position: relative;
-    box-shadow: var(--#{$expandable-section}--m-display-lg--BoxShadow);
-
-    &::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: var(--#{$expandable-section}--m-display-lg--after--Width);
-      content: "";
-      background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
-    }
+    --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
+
+    background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
+    border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
+    border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
   }
 
   &.pf-m-indented {
@@ -100,11 +104,14 @@
   }
 
   &.pf-m-truncate {
-    --#{$expandable-section}__toggle--MarginTop: var(--#{$expandable-section}--m-truncate__toggle--MarginTop);
     --#{$expandable-section}__toggle--PaddingTop: 0;
     --#{$expandable-section}__toggle--PaddingRight: 0;
-    --#{$expandable-section}__toggle--PaddingBottom: 0;
-    --#{$expandable-section}__toggle-text--MarginLeft: 0;
+    --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
+    --#{$expandable-section}__toggle--PaddingLeft: 0;
+    --#{$expandable-section}__content--PaddingTop: 0;
+    --#{$expandable-section}__content--PaddingRight: 0;
+    --#{$expandable-section}__content--PaddingBottom: 0;
+    --#{$expandable-section}__content--PaddingLeft: 0;
 
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
@@ -115,35 +122,41 @@
       overflow: hidden;
     }
   }
-
-  &.pf-m-detached {
-    --#{$expandable-section}--m-truncate__toggle--MarginTop: 0;
-  }
 }
 
 .#{$expandable-section}__toggle {
   display: flex;
-  padding: var(--#{$expandable-section}__toggle--PaddingTop) var(--#{$expandable-section}__toggle--PaddingRight) var(--#{$expandable-section}__toggle--PaddingBottom) var(--#{$expandable-section}__toggle--PaddingLeft);
-  margin-top: var(--#{$expandable-section}__toggle--MarginTop);
+  column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
+  width: var(--#{$expandable-section}__toggle--Width, initial);
+  padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
+  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
   color: var(--#{$expandable-section}__toggle--Color);
   background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
 
   &:hover {
     --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
+    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
   }
 
   &:active,
   &.pf-m-active {
     --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
+    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
   }
 
   &:focus {
     --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
+    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
   }
 }
 
 .#{$expandable-section}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);
   transition: var(--#{$expandable-section}__toggle-icon--Transition);
@@ -154,14 +167,10 @@
   }
 }
 
-.#{$expandable-section}__toggle-text {
-  margin-left: var(--#{$expandable-section}__toggle-text--MarginLeft);
-}
-
 .#{$expandable-section}__content {
   max-width: var(--#{$expandable-section}__content--MaxWidth);
-  padding-right: var(--#{$expandable-section}__content--PaddingRight);
-  padding-bottom: var(--#{$expandable-section}__content--PaddingBottom);
-  padding-left: var(--#{$expandable-section}__content--PaddingLeft);
-  margin-top: var(--#{$expandable-section}__content--MarginTop);
+  padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
+  padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
+  padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
+  padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
 }

package/components/FileUpload/file-upload.css

@@ -16,20 +16,14 @@
 }
 .pf-v5-c-file-upload.pf-m-drag-hover::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: var(--pf-v5-c-file-upload--m-drag-hover--before--ZIndex);
   content: "";
   border: var(--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-file-upload--m-drag-hover--before--BorderColor);
 }
 .pf-v5-c-file-upload.pf-m-drag-hover::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   content: "";
   background-color: var(--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor);
   opacity: var(--pf-v5-c-file-upload--m-drag-hover--after--Opacity);
@@ -39,10 +33,10 @@
 }
 .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
   position: absolute;
-  top: 0;
-  right: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  bottom: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  left: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-block-start: 0;
+  inset-block-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-inline-start: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-inline-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
   content: "";
   background-color: var(--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor);
 }
@@ -58,12 +52,12 @@
 .pf-v5-c-file-upload__file-details .pf-v5-c-form-control {
   flex: 1 1 auto;
   min-height: var(--pf-v5-c-file-upload__file-details__c-form-control--MinHeight);
-  border-top: 0;
+  border-block-start: 0;
 }
 
 .pf-v5-c-file-upload__file-details-spinner {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }

package/components/FileUpload/file-upload.scss

@@ -27,10 +27,7 @@
   &.pf-m-drag-hover {
     &::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       z-index: var(--#{$file-upload}--m-drag-hover--before--ZIndex);
       content: "";
       border: var(--#{$file-upload}--m-drag-hover--before--BorderWidth) solid var(--#{$file-upload}--m-drag-hover--before--BorderColor);
@@ -38,10 +35,7 @@
 
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       content: "";
       background-color: var(--#{$file-upload}--m-drag-hover--after--BackgroundColor);
       opacity: var(--#{$file-upload}--m-drag-hover--after--Opacity);
@@ -54,10 +48,10 @@
 
       &::before {
         position: absolute;
-        top: 0;
-        right: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        bottom: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        left: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-block-start: 0;
+        inset-block-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-inline-start: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-inline-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
         content: "";
         background-color: var(--#{$file-upload}--m-loading__file-details--before--BackgroundColor);
       }
@@ -78,13 +72,13 @@
   .#{$form-control} {
     flex: 1 1 auto;
     min-height: var(--#{$file-upload}__file-details__c-form-control--MinHeight);
-    border-top: 0;
+    border-block-start: 0;
   }
 }
 
 .#{$file-upload}__file-details-spinner {
   position: absolute;
-  top: 50%;
-  left: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }