@patternfly/react-styles 5.0.0-alpha.9 → 5.0.0-prerelease.2

package/css/components/Accordion/accordion.css

@@ -1,124 +1,124 @@
-.pf-c-accordion {
-  --pf-global--Color--100: var(--pf-global--Color--dark-100);
-  --pf-global--Color--200: var(--pf-global--Color--dark-200);
-  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
-  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
-  --pf-global--link--Color: var(--pf-global--link--Color--dark);
-  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
-  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
+.pf-v5-c-accordion {
+  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
+  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
+  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
+  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
+  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
+  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
 }
 
-.pf-c-accordion {
-  --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__toggle--before--Top: 0;
-  --pf-c-accordion__toggle--after--Top: 0;
-  --pf-c-accordion__toggle--after--BackgroundColor: transparent;
-  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-accordion__toggle--BackgroundColor: transparent;
-  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
-  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
-  --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-c-accordion__expandable-content--Color: var(--pf-global--Color--200);
-  --pf-c-accordion__expandable-content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
-  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
-  --pf-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
-  --pf-c-accordion__expandable-content-body--after--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__expandable-content-body--before--Top: 0;
-  --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
-  --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-accordion--m-display-lg__expandable-content--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
-  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
-  --pf-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
-  --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-global--BorderColor--100);
-  color: var(--pf-global--Color--100);
-  background-color: var(--pf-c-accordion--BackgroundColor);
-}
-.pf-c-accordion.pf-m-display-lg {
-  --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
-  --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
-  --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
-  --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
-  --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
-  --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
-  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
-  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
-  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
-  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
-  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
-  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
-  --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
-  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
-  --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
-  --pf-c-accordion__expandable-content--FontSize: var(--pf-c-accordion--m-display-lg__expandable-content--FontSize);
-  --pf-c-accordion__expandable-content--Color: var(--pf-c-accordion--m-display-lg__expandable-content--Color);
-}
-.pf-c-accordion.pf-m-display-lg .pf-c-accordion__expandable-content-body:last-child {
-  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
-}
-.pf-c-accordion.pf-m-bordered {
-  --pf-c-accordion__toggle--after--Top: var(--pf-c-accordion--m-bordered__toggle--after--Top);
-  border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
-}
-.pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
+.pf-v5-c-accordion {
+  --pf-v5-c-accordion--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion__toggle--before--Top: 0;
+  --pf-v5-c-accordion__toggle--after--Top: 0;
+  --pf-v5-c-accordion__toggle--after--BackgroundColor: transparent;
+  --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-accordion__toggle--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-accordion__toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-accordion__toggle--before--Width: var(--pf-v5-global--BorderWidth--lg);
+  --pf-v5-c-accordion__toggle--after--Width: var(--pf-v5-global--BorderWidth--lg);
+  --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-accordion__toggle--BackgroundColor: transparent;
+  --pf-v5-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-v5-global--spacer--lg));
+  --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-accordion__toggle--focus__toggle-text--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v5-c-accordion__expandable-content--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-accordion__expandable-content-body--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
+  --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
+  --pf-v5-c-accordion__expandable-content-body--after--Width: var(--pf-v5-global--BorderWidth--lg);
+  --pf-v5-c-accordion__expandable-content-body--before--Top: 0;
+  --pf-v5-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-v5-global--FontFamily--heading);
+  --pf-v5-c-accordion--m-display-lg__toggle--FontSize: var(--pf-v5-global--FontSize--xl);
+  --pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-accordion--m-display-lg__expandable-content--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
+  --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-accordion--m-bordered--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-accordion--m-bordered--BorderTopColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
+  --pf-v5-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
+  --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
+  color: var(--pf-v5-global--Color--100);
+  background-color: var(--pf-v5-c-accordion--BackgroundColor);
+}
+.pf-v5-c-accordion.pf-m-display-lg {
+  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop);
+  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight);
+  --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom);
+  --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft);
+  --pf-v5-c-accordion__toggle--FontFamily: var(--pf-v5-c-accordion--m-display-lg__toggle--FontFamily);
+  --pf-v5-c-accordion__toggle--FontSize: var(--pf-v5-c-accordion--m-display-lg__toggle--FontSize);
+  --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
+  --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
+  --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
+  --pf-v5-c-accordion__toggle--focus__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
+  --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
+  --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
+  --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
+  --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
+  --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
+  --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
+  --pf-v5-c-accordion__expandable-content-body--PaddingLeft: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
+  --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-v5-c-accordion--m-display-lg__expandable-content--FontSize);
+  --pf-v5-c-accordion__expandable-content--Color: var(--pf-v5-c-accordion--m-display-lg__expandable-content--Color);
+}
+.pf-v5-c-accordion.pf-m-display-lg .pf-v5-c-accordion__expandable-content-body:last-child {
+  --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
+}
+.pf-v5-c-accordion.pf-m-bordered {
+  --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
+  border-top: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
+}
+.pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: "";
-  border: solid var(--pf-c-accordion--m-bordered__toggle--before--BorderColor);
-  border-width: var(--pf-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border: solid var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
+  border-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
 }
-.pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
-  --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
+.pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
+  --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
 }
-.pf-c-accordion.pf-m-bordered .pf-c-accordion__expandable-content.pf-m-expanded .pf-c-accordion__expandable-content-body:last-child::before {
+.pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -126,103 +126,103 @@
   left: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+  border-bottom: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
 }
 
-.pf-c-accordion__toggle {
+.pf-v5-c-accordion__toggle {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
-  font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
-  font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
-  background-color: var(--pf-c-accordion__toggle--BackgroundColor);
+  padding: var(--pf-v5-c-accordion__toggle--PaddingTop) var(--pf-v5-c-accordion__toggle--PaddingRight) var(--pf-v5-c-accordion__toggle--PaddingBottom) var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
+  font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
+  background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
   border: 0;
 }
-.pf-c-accordion__toggle::after {
+.pf-v5-c-accordion__toggle::after {
   position: absolute;
-  top: var(--pf-c-accordion__toggle--after--Top);
+  top: var(--pf-v5-c-accordion__toggle--after--Top);
   bottom: 0;
   left: 0;
-  width: var(--pf-c-accordion__toggle--after--Width);
+  width: var(--pf-v5-c-accordion__toggle--after--Width);
   content: "";
-  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor);
+  background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
 }
-.pf-c-accordion__toggle.pf-m-expanded {
-  --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--after--BackgroundColor);
+.pf-v5-c-accordion__toggle.pf-m-expanded {
+  --pf-v5-c-accordion__toggle--after--BackgroundColor: var(--pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor);
 }
-.pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
-  font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
-  color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
+.pf-v5-c-accordion__toggle.pf-m-expanded .pf-v5-c-accordion__toggle-text {
+  font-weight: var(--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
+  color: var(--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color);
 }
-.pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
-  transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+.pf-v5-c-accordion__toggle.pf-m-expanded .pf-v5-c-accordion__toggle-icon {
+  transform: rotate(var(--pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
 }
-.pf-c-accordion__toggle:hover {
-  background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
+.pf-v5-c-accordion__toggle:hover {
+  background-color: var(--pf-v5-c-accordion__toggle--hover--BackgroundColor);
 }
-.pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
-  color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
+.pf-v5-c-accordion__toggle:hover .pf-v5-c-accordion__toggle-text {
+  color: var(--pf-v5-c-accordion__toggle--hover__toggle-text--Color);
 }
-.pf-c-accordion__toggle:focus {
-  background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
+.pf-v5-c-accordion__toggle:focus {
+  background-color: var(--pf-v5-c-accordion__toggle--focus--BackgroundColor);
 }
-.pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
-  font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
-  color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
+.pf-v5-c-accordion__toggle:focus .pf-v5-c-accordion__toggle-text {
+  font-weight: var(--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight);
+  color: var(--pf-v5-c-accordion__toggle--focus__toggle-text--Color);
 }
-.pf-c-accordion__toggle:active {
-  background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
+.pf-v5-c-accordion__toggle:active {
+  background-color: var(--pf-v5-c-accordion__toggle--active--BackgroundColor);
 }
-.pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
-  font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
-  color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
+.pf-v5-c-accordion__toggle:active .pf-v5-c-accordion__toggle-text {
+  font-weight: var(--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight);
+  color: var(--pf-v5-c-accordion__toggle--active__toggle-text--Color);
 }
 
-.pf-c-accordion__toggle-text {
+.pf-v5-c-accordion__toggle-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
+  max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth);
 }
 
-.pf-c-accordion__toggle-icon {
-  transition: var(--pf-c-accordion__toggle-icon--Transition);
+.pf-v5-c-accordion__toggle-icon {
+  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
 
-.pf-c-accordion__expandable-content {
-  font-size: var(--pf-c-accordion__expandable-content--FontSize);
-  color: var(--pf-c-accordion__expandable-content--Color);
+.pf-v5-c-accordion__expandable-content {
+  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
+  color: var(--pf-v5-c-accordion__expandable-content--Color);
 }
-.pf-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-c-accordion__expandable-content--m-fixed--MaxHeight);
+.pf-v5-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
-.pf-c-accordion__expandable-content.pf-m-expanded {
-  --pf-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
+.pf-v5-c-accordion__expandable-content.pf-m-expanded {
+  --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
 }
 
-.pf-c-accordion__expandable-content-body {
+.pf-v5-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-c-accordion__expandable-content-body--PaddingTop) var(--pf-c-accordion__expandable-content-body--PaddingRight) var(--pf-c-accordion__expandable-content-body--PaddingBottom) var(--pf-c-accordion__expandable-content-body--PaddingLeft);
+  padding: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop) var(--pf-v5-c-accordion__expandable-content-body--PaddingRight) var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom) var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
 }
-.pf-c-accordion__expandable-content-body::after {
+.pf-v5-c-accordion__expandable-content-body::after {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
-  width: var(--pf-c-accordion__expandable-content-body--after--Width);
+  width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
   content: "";
-  background-color: var(--pf-c-accordion__expandable-content-body--after--BackgroundColor);
+  background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);
 }
-.pf-c-accordion__expandable-content-body + .pf-c-accordion__expandable-content-body {
-  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
+.pf-v5-c-accordion__expandable-content-body + .pf-v5-c-accordion__expandable-content-body {
+  --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
 }
 
-:where(.pf-theme-dark) .pf-c-accordion {
-  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+:where(.pf-v5-theme-dark) .pf-v5-c-accordion {
+  --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  --pf-v5-c-accordion__toggle--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  --pf-v5-c-accordion__toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Accordion/accordion.d.ts

@@ -1,17 +1,17 @@
 import './accordion.css';
 declare const _default: {
-  "accordion": "pf-c-accordion",
-  "accordionExpandableContent": "pf-c-accordion__expandable-content",
-  "accordionExpandableContentBody": "pf-c-accordion__expandable-content-body",
-  "accordionToggle": "pf-c-accordion__toggle",
-  "accordionToggleIcon": "pf-c-accordion__toggle-icon",
-  "accordionToggleText": "pf-c-accordion__toggle-text",
+  "accordion": "pf-v5-c-accordion",
+  "accordionExpandableContent": "pf-v5-c-accordion__expandable-content",
+  "accordionExpandableContentBody": "pf-v5-c-accordion__expandable-content-body",
+  "accordionToggle": "pf-v5-c-accordion__toggle",
+  "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
+  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Accordion/accordion.js

@@ -2,17 +2,17 @@
 exports.__esModule = true;
 require('./accordion.css');
 exports.default = {
-  "accordion": "pf-c-accordion",
-  "accordionExpandableContent": "pf-c-accordion__expandable-content",
-  "accordionExpandableContentBody": "pf-c-accordion__expandable-content-body",
-  "accordionToggle": "pf-c-accordion__toggle",
-  "accordionToggleIcon": "pf-c-accordion__toggle-icon",
-  "accordionToggleText": "pf-c-accordion__toggle-text",
+  "accordion": "pf-v5-c-accordion",
+  "accordionExpandableContent": "pf-v5-c-accordion__expandable-content",
+  "accordionExpandableContentBody": "pf-v5-c-accordion__expandable-content-body",
+  "accordionToggle": "pf-v5-c-accordion__toggle",
+  "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
+  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Accordion/accordion.mjs

@@ -1,16 +1,16 @@
 import './accordion.css';
 export default {
-  "accordion": "pf-c-accordion",
-  "accordionExpandableContent": "pf-c-accordion__expandable-content",
-  "accordionExpandableContentBody": "pf-c-accordion__expandable-content-body",
-  "accordionToggle": "pf-c-accordion__toggle",
-  "accordionToggleIcon": "pf-c-accordion__toggle-icon",
-  "accordionToggleText": "pf-c-accordion__toggle-text",
+  "accordion": "pf-v5-c-accordion",
+  "accordionExpandableContent": "pf-v5-c-accordion__expandable-content",
+  "accordionExpandableContentBody": "pf-v5-c-accordion__expandable-content-body",
+  "accordionToggle": "pf-v5-c-accordion__toggle",
+  "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
+  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/ActionList/action-list.css

@@ -1,27 +1,27 @@
-.pf-c-action-list {
-  --pf-c-action-list--m-icon--spacer: 0;
-  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
-  --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
+.pf-v5-c-action-list {
+  --pf-v5-c-action-list--m-icon--spacer: 0;
+  --pf-v5-c-action-list--child--spacer-base: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-action-list--group--spacer-base: var(--pf-v5-global--spacer--2xl);
 }
 
-.pf-c-action-list,
-.pf-c-action-list__group {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
-  --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
+.pf-v5-c-action-list,
+.pf-v5-c-action-list__group {
+  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--child--spacer-base);
+  --pf-v5-c-action-list--group--spacer: var(--pf-v5-c-action-list--group--spacer-base);
   display: flex;
   align-items: center;
 }
-.pf-c-action-list > * + *,
-.pf-c-action-list__group > * + * {
-  margin-left: var(--pf-c-action-list--child--spacer);
+.pf-v5-c-action-list > * + *,
+.pf-v5-c-action-list__group > * + * {
+  margin-left: var(--pf-v5-c-action-list--child--spacer);
 }
-.pf-c-action-list > * + .pf-c-action-list__group,
-.pf-c-action-list .pf-c-action-list__group + *,
-.pf-c-action-list__group > * + .pf-c-action-list__group,
-.pf-c-action-list__group .pf-c-action-list__group + * {
-  margin-left: var(--pf-c-action-list--group--spacer);
+.pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
+.pf-v5-c-action-list .pf-v5-c-action-list__group + *,
+.pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
+.pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
+  margin-left: var(--pf-v5-c-action-list--group--spacer);
 }
-.pf-c-action-list.pf-m-icons,
-.pf-c-action-list__group.pf-m-icons {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
+.pf-v5-c-action-list.pf-m-icons,
+.pf-v5-c-action-list__group.pf-m-icons {
+  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--m-icon--spacer);
 }

package/css/components/ActionList/action-list.d.ts

@@ -1,7 +1,7 @@
 import './action-list.css';
 declare const _default: {
-  "actionList": "pf-c-action-list",
-  "actionListGroup": "pf-c-action-list__group",
+  "actionList": "pf-v5-c-action-list",
+  "actionListGroup": "pf-v5-c-action-list__group",
   "modifiers": {
     "icons": "pf-m-icons"
   }

package/css/components/ActionList/action-list.js

@@ -2,8 +2,8 @@
 exports.__esModule = true;
 require('./action-list.css');
 exports.default = {
-  "actionList": "pf-c-action-list",
-  "actionListGroup": "pf-c-action-list__group",
+  "actionList": "pf-v5-c-action-list",
+  "actionListGroup": "pf-v5-c-action-list__group",
   "modifiers": {
     "icons": "pf-m-icons"
   }

package/css/components/ActionList/action-list.mjs

@@ -1,7 +1,7 @@
 import './action-list.css';
 export default {
-  "actionList": "pf-c-action-list",
-  "actionListGroup": "pf-c-action-list__group",
+  "actionList": "pf-v5-c-action-list",
+  "actionListGroup": "pf-v5-c-action-list__group",
   "modifiers": {
     "icons": "pf-m-icons"
   }

package/css/components/Alert/alert-group.css

@@ -0,0 +1,54 @@
+.pf-v5-c-alert-group {
+  --pf-v5-c-alert-group__item--MarginTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-alert-group--m-toast--Top: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-alert-group--m-toast--Right: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-alert-group--m-toast--MaxWidth: 37.5rem;
+  --pf-v5-c-alert-group--m-toast--ZIndex: var(--pf-v5-global--ZIndex--2xl);
+  --pf-v5-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-v5-c-alert-group__overflow-button--PaddingTop: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-alert-group__overflow-button--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--PaddingBottom: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-alert-group__overflow-button--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
+  --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-alert-group__overflow-button--hover--Color: var(--pf-v5-global--link--Color--hover);
+  --pf-v5-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
+  --pf-v5-c-alert-group__overflow-button--focus--Color: var(--pf-v5-global--link--Color--hover);
+  --pf-v5-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
+  --pf-v5-c-alert-group__overflow-button--active--Color: var(--pf-v5-global--link--Color--hover);
+  --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
+}
+.pf-v5-c-alert-group > * + * {
+  margin-top: var(--pf-v5-c-alert-group__item--MarginTop);
+}
+.pf-v5-c-alert-group.pf-m-toast {
+  position: fixed;
+  top: var(--pf-v5-c-alert-group--m-toast--Top);
+  right: var(--pf-v5-c-alert-group--m-toast--Right);
+  z-index: var(--pf-v5-c-alert-group--m-toast--ZIndex);
+  width: calc(100% - var(--pf-v5-c-alert-group--m-toast--Right) * 2);
+  max-width: var(--pf-v5-c-alert-group--m-toast--MaxWidth);
+}
+
+.pf-v5-c-alert-group__overflow-button {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-v5-c-alert-group__overflow-button--PaddingTop) var(--pf-v5-c-alert-group__overflow-button--PaddingRight) var(--pf-v5-c-alert-group__overflow-button--PaddingBottom) var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  color: var(--pf-v5-c-alert-group__overflow-button--Color);
+  background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
+  border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);
+  box-shadow: var(--pf-v5-c-alert-group__overflow-button--BoxShadow);
+}
+.pf-v5-c-alert-group__overflow-button:hover {
+  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-c-alert-group__overflow-button--hover--Color);
+  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-c-alert-group__overflow-button--hover--BoxShadow);
+}
+.pf-v5-c-alert-group__overflow-button:focus {
+  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-c-alert-group__overflow-button--focus--Color);
+  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-c-alert-group__overflow-button--focus--BoxShadow);
+}
+.pf-v5-c-alert-group__overflow-button:active {
+  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-c-alert-group__overflow-button--active--Color);
+  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-c-alert-group__overflow-button--active--BoxShadow);
+}

package/css/components/Alert/alert-group.d.ts

@@ -0,0 +1,9 @@
+import './alert-group.css';
+declare const _default: {
+  "alertGroup": "pf-v5-c-alert-group",
+  "alertGroupOverflowButton": "pf-v5-c-alert-group__overflow-button",
+  "modifiers": {
+    "toast": "pf-m-toast"
+  }
+};
+export default _default;