@patternfly/react-styles 6.0.0-alpha.2 → 6.0.0-alpha.20

package/css/components/ExpandableSection/expandable-section.css

@@ -1,138 +1,140 @@
-.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);
-  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
-  --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--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--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-truncate__content--LineClamp: 3;
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
+:root {
+  --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
+  --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
+  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
+  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
+  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
+  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v6-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section__content--MaxWidth: auto;
+  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
+  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
+  --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v6-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
+  --pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
+  --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section__toggle--PaddingLeft));
+  --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft));
+  --pf-v6-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
 }
-.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.pf-m-limit-width {
-  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
-}
-.pf-v5-c-expandable-section.pf-m-display-lg {
-  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop);
-  --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__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;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 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.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.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
+
+.pf-v6-c-expandable-section.pf-m-expanded {
+  --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
+  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
+  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
+  --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
+  --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
+}
+.pf-v6-c-expandable-section.pf-m-limit-width {
+  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
+}
+.pf-v6-c-expandable-section.pf-m-display-lg {
+  --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop);
+  --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight);
+  --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom);
+  --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft);
+  --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
+  --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
+  --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
+  --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
+  --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
+  --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingRight);
+  --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom);
+  --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft);
+  --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
+  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
+  border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
+  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
+}
+.pf-v6-c-expandable-section.pf-m-indented {
+  --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft);
+}
+.pf-v6-c-expandable-section.pf-m-truncate {
+  --pf-v6-c-expandable-section__toggle--PaddingTop: 0;
+  --pf-v6-c-expandable-section__toggle--PaddingRight: 0;
+  --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom);
+  --pf-v6-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-v6-c-expandable-section__content--PaddingTop: 0;
+  --pf-v6-c-expandable-section__content--PaddingRight: 0;
+  --pf-v6-c-expandable-section__content--PaddingBottom: 0;
+  --pf-v6-c-expandable-section__content--PaddingLeft: 0;
+}
+.pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
+  -webkit-line-clamp: var(--pf-v6-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 {
+.pf-v6-c-expandable-section__toggle {
   display: flex;
-  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);
-  margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
-  color: var(--pf-v5-c-expandable-section__toggle--Color);
-  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
+  column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
+  width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
+  padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingTop);
+  padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingRight);
+  background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--pf-v6-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: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:focus {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+.pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
+  --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
+  --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
 }
 
-.pf-v5-c-expandable-section__toggle-icon {
-  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
-  color: var(--pf-v5-c-expandable-section__toggle-icon--Color);
-  transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
-  transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
+.pf-v6-c-expandable-section__toggle-icon {
+  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
+  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
+  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
+  transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
   scale: -1 1;
 }
 
-.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-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
+  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }
 
-.pf-v5-c-expandable-section__toggle-text {
-  margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
+.pf-v6-c-expandable-section__toggle-text {
+  color: var(--pf-v6-c-expandable-section__toggle-text--Color);
 }
 
-.pf-v5-c-expandable-section__content {
-  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
-  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);
-  margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
+.pf-v6-c-expandable-section__content {
+  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
+  padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingTop);
+  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBottom);
+  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingLeft);
+  padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingRight);
 }

package/css/components/ExpandableSection/expandable-section.d.ts

@@ -1,19 +1,17 @@
 import './expandable-section.css';
 declare const _default: {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "expandableSection": "pf-v5-c-expandable-section",
-  "expandableSectionContent": "pf-v5-c-expandable-section__content",
-  "expandableSectionToggle": "pf-v5-c-expandable-section__toggle",
-  "expandableSectionToggleIcon": "pf-v5-c-expandable-section__toggle-icon",
-  "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "expandableSection": "pf-v6-c-expandable-section",
+  "expandableSectionContent": "pf-v6-c-expandable-section__content",
+  "expandableSectionToggle": "pf-v6-c-expandable-section__toggle",
+  "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
+  "expandableSectionToggleText": "pf-v6-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/ExpandableSection/expandable-section.js

@@ -2,20 +2,18 @@
 exports.__esModule = true;
 require('./expandable-section.css');
 exports.default = {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "expandableSection": "pf-v5-c-expandable-section",
-  "expandableSectionContent": "pf-v5-c-expandable-section__content",
-  "expandableSectionToggle": "pf-v5-c-expandable-section__toggle",
-  "expandableSectionToggleIcon": "pf-v5-c-expandable-section__toggle-icon",
-  "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "expandableSection": "pf-v6-c-expandable-section",
+  "expandableSectionContent": "pf-v6-c-expandable-section__content",
+  "expandableSectionToggle": "pf-v6-c-expandable-section__toggle",
+  "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
+  "expandableSectionToggleText": "pf-v6-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/ExpandableSection/expandable-section.mjs

@@ -1,19 +1,17 @@
 import './expandable-section.css';
 export default {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "expandableSection": "pf-v5-c-expandable-section",
-  "expandableSectionContent": "pf-v5-c-expandable-section__content",
-  "expandableSectionToggle": "pf-v5-c-expandable-section__toggle",
-  "expandableSectionToggleIcon": "pf-v5-c-expandable-section__toggle-icon",
-  "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "expandableSection": "pf-v6-c-expandable-section",
+  "expandableSectionContent": "pf-v6-c-expandable-section__content",
+  "expandableSectionToggle": "pf-v6-c-expandable-section__toggle",
+  "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
+  "expandableSectionToggleText": "pf-v6-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/FileUpload/file-upload.css

@@ -1,61 +1,55 @@
-.pf-v5-c-file-upload {
-  --pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Left: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Right: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-file-upload--m-drag-hover--after--Opacity: .1;
-  --pf-v5-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-v5-global--spacer--3xl) * 2);
-  --pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
+:where(:root),
+:where(.pf-v6-c-file-upload) {
+  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-file-upload--BorderColor: transparent;
+  --pf-v6-c-file-upload--BorderStyle: solid;
+  --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
+  --pf-v6-c-file-upload--m-drag-hover--BorderStyle: dashed;
+  --pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v6-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
+}
+
+.pf-v6-c-file-upload {
   position: relative;
   display: flex;
   flex-direction: column;
-}
-.pf-v5-c-file-upload.pf-m-drag-hover::before {
-  position: absolute;
-  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;
-  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);
-}
-.pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details {
+  row-gap: var(--pf-v6-c-file-upload--RowGap);
+  padding-block-start: var(--pf-v6-c-file-upload--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-file-upload--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-file-upload--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-file-upload--PaddingInlineEnd);
+  border: var(--pf-v6-c-file-upload--BorderWidth) var(--pf-v6-c-file-upload--BorderStyle) var(--pf-v6-c-file-upload--BorderColor);
+  border-radius: var(--pf-v6-c-file-upload--BorderRadius);
+}
+.pf-v6-c-file-upload.pf-m-drag-hover {
+  --pf-v6-c-file-upload--BorderColor: var(--pf-v6-c-file-upload--m-drag-hover--BorderColor);
+  --pf-v6-c-file-upload--BorderStyle: var(--pf-v6-c-file-upload--m-drag-hover--BorderStyle);
+}
+.pf-v6-c-file-upload.pf-m-loading .pf-v6-c-file-upload__file-details {
   position: relative;
 }
-.pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
-  position: absolute;
-  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);
-}
 
-.pf-v5-c-file-upload__file-select .pf-v5-c-button.pf-m-control {
-  outline-offset: var(--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset);
+.pf-v6-c-file-upload__file-select .pf-v6-c-button.pf-m-control {
+  outline-offset: var(--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset);
 }
 
-.pf-v5-c-file-upload__file-details {
+.pf-v6-c-file-upload__file-details {
   position: relative;
   display: flex;
 }
-.pf-v5-c-file-upload__file-details .pf-v5-c-form-control {
+.pf-v6-c-file-upload__file-details .pf-v6-c-form-control {
   flex: 1 1 auto;
-  min-height: var(--pf-v5-c-file-upload__file-details__c-form-control--MinHeight);
+  min-height: var(--pf-v6-c-file-upload__file-details__c-form-control--MinHeight);
   border-block-start: 0;
 }
 
-.pf-v5-c-file-upload__file-details-spinner {
+.pf-v6-c-file-upload__file-details-spinner {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;

package/css/components/FileUpload/file-upload.d.ts

@@ -1,11 +1,11 @@
 import './file-upload.css';
 declare const _default: {
-  "button": "pf-v5-c-button",
-  "fileUpload": "pf-v5-c-file-upload",
-  "fileUploadFileDetails": "pf-v5-c-file-upload__file-details",
-  "fileUploadFileDetailsSpinner": "pf-v5-c-file-upload__file-details-spinner",
-  "fileUploadFileSelect": "pf-v5-c-file-upload__file-select",
-  "formControl": "pf-v5-c-form-control",
+  "button": "pf-v6-c-button",
+  "fileUpload": "pf-v6-c-file-upload",
+  "fileUploadFileDetails": "pf-v6-c-file-upload__file-details",
+  "fileUploadFileDetailsSpinner": "pf-v6-c-file-upload__file-details-spinner",
+  "fileUploadFileSelect": "pf-v6-c-file-upload__file-select",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "dragHover": "pf-m-drag-hover",
     "loading": "pf-m-loading",

package/css/components/FileUpload/file-upload.js

@@ -2,12 +2,12 @@
 exports.__esModule = true;
 require('./file-upload.css');
 exports.default = {
-  "button": "pf-v5-c-button",
-  "fileUpload": "pf-v5-c-file-upload",
-  "fileUploadFileDetails": "pf-v5-c-file-upload__file-details",
-  "fileUploadFileDetailsSpinner": "pf-v5-c-file-upload__file-details-spinner",
-  "fileUploadFileSelect": "pf-v5-c-file-upload__file-select",
-  "formControl": "pf-v5-c-form-control",
+  "button": "pf-v6-c-button",
+  "fileUpload": "pf-v6-c-file-upload",
+  "fileUploadFileDetails": "pf-v6-c-file-upload__file-details",
+  "fileUploadFileDetailsSpinner": "pf-v6-c-file-upload__file-details-spinner",
+  "fileUploadFileSelect": "pf-v6-c-file-upload__file-select",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "dragHover": "pf-m-drag-hover",
     "loading": "pf-m-loading",

package/css/components/FileUpload/file-upload.mjs

@@ -1,11 +1,11 @@
 import './file-upload.css';
 export default {
-  "button": "pf-v5-c-button",
-  "fileUpload": "pf-v5-c-file-upload",
-  "fileUploadFileDetails": "pf-v5-c-file-upload__file-details",
-  "fileUploadFileDetailsSpinner": "pf-v5-c-file-upload__file-details-spinner",
-  "fileUploadFileSelect": "pf-v5-c-file-upload__file-select",
-  "formControl": "pf-v5-c-form-control",
+  "button": "pf-v6-c-button",
+  "fileUpload": "pf-v6-c-file-upload",
+  "fileUploadFileDetails": "pf-v6-c-file-upload__file-details",
+  "fileUploadFileDetailsSpinner": "pf-v6-c-file-upload__file-details-spinner",
+  "fileUploadFileSelect": "pf-v6-c-file-upload__file-select",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "dragHover": "pf-m-drag-hover",
     "loading": "pf-m-loading",