@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.11

package/css/components/Chip/chip.css

@@ -1,104 +1,113 @@
-.pf-c-chip {
-  --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-chip {
+  --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-chip {
-  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
-  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
-  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
-  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
-  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
-  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
-  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__text--Color: var(--pf-global--Color--100);
-  --pf-c-chip__text--MaxWidth: 16ch;
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
-  color: var(--pf-global--Color--100);
+.pf-v5-c-chip {
+  --pf-v5-c-chip--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-chip--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-chip--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-chip--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--Color--light-100);
+  --pf-v5-c-chip--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
+  --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-chip--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-chip--before--BorderRadius: var(--pf-v5-c-chip--BorderRadius);
+  --pf-v5-c-chip--m-overflow__text--Color: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-chip--m-draggable--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
+  --pf-v5-c-chip--m-draggable__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-chip__content--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-chip__text--MaxWidth: 16ch;
+  --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-chip__actions--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-chip__actions--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-chip__actions--c-button--MarginTop: calc(var(--pf-v5-c-chip--PaddingTop) * -1);
+  --pf-v5-c-chip__actions--c-button--MarginRight: calc(var(--pf-v5-c-chip--PaddingRight) / 2 * -1);
+  --pf-v5-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v5-c-chip--PaddingBottom) * -1);
+  --pf-v5-c-chip__actions--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-chip__icon--MarginLeft: var(--pf-v5-global--spacer--sm);
+  color: var(--pf-v5-global--Color--100);
   position: relative;
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
+  padding: var(--pf-v5-c-chip--PaddingTop) var(--pf-v5-c-chip--PaddingRight) var(--pf-v5-c-chip--PaddingBottom) var(--pf-v5-c-chip--PaddingLeft);
   list-style: none;
-  background-color: var(--pf-c-chip--BackgroundColor);
-  border-radius: var(--pf-c-chip--BorderRadius);
+  background-color: var(--pf-v5-c-chip--BackgroundColor);
+  border-radius: var(--pf-v5-c-chip--BorderRadius);
 }
-.pf-c-chip::before {
+.pf-v5-c-chip::before {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: "";
-  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
-  border-radius: var(--pf-c-chip--before--BorderRadius);
+  border: var(--pf-v5-c-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
+  border-radius: var(--pf-v5-c-chip--before--BorderRadius);
 }
-.pf-c-chip.pf-m-overflow {
+.pf-v5-c-chip.pf-m-overflow {
   border: 0;
 }
-.pf-c-chip.pf-m-overflow .pf-c-chip__text {
-  color: var(--pf-c-chip--m-overflow__text--Color);
+.pf-v5-c-chip.pf-m-overflow .pf-v5-c-chip__text {
+  color: var(--pf-v5-c-chip--m-overflow__text--Color);
 }
-.pf-c-chip.pf-m-draggable {
-  --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
-  box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
+.pf-v5-c-chip.pf-m-draggable {
+  --pf-v5-c-chip--BackgroundColor: var(--pf-v5-c-chip--m-draggable--BackgroundColor);
+  box-shadow: var(--pf-v5-c-chip--m-draggable--BoxShadow);
 }
-.pf-c-chip.pf-m-draggable .pf-c-chip__icon {
-  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
-}
-.pf-c-chip .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-  margin-top: var(--pf-c-chip__c-button--MarginTop);
-  margin-right: var(--pf-c-chip__c-button--MarginRight);
-  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-}
-.pf-c-chip .pf-c-badge {
-  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
+.pf-v5-c-chip.pf-m-draggable .pf-v5-c-chip__icon {
+  font-size: var(--pf-v5-c-chip--m-draggable__icon--FontSize);
 }
 
-.pf-c-chip__text {
+.pf-v5-c-chip__text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
-  max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
-  color: var(--pf-c-chip__text--Color);
+  max-width: var(--pf-v5-c-chip__text--MaxWidth);
+  color: var(--pf-v5-c-chip__text--Color);
+}
+
+.pf-v5-c-chip__icon + .pf-v5-c-chip__text,
+.pf-v5-c-chip__text + .pf-v5-c-chip__icon {
+  margin-left: var(--pf-v5-c-chip__icon--MarginLeft);
 }
 
-.pf-c-chip__icon + .pf-c-chip__text,
-.pf-c-chip__text + .pf-c-chip__icon {
-  margin-left: var(--pf-c-chip__icon--MarginLeft);
+.pf-v5-c-chip__content {
+  display: flex;
+  column-gap: var(--pf-v5-c-chip__content--ColumnGap);
+  align-items: center;
+  font-size: var(--pf-v5-c-chip__content--FontSize);
+}
+
+.pf-v5-c-chip__actions {
+  font-size: var(--pf-v5-c-chip__actions--FontSize);
+}
+.pf-v5-c-chip__actions .pf-v5-c-button {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-chip__actions--c-button--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-chip__actions--c-button--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
+  --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
+  margin-top: var(--pf-v5-c-chip__actions--c-button--MarginTop);
+  margin-right: var(--pf-v5-c-chip__actions--c-button--MarginRight);
+  margin-bottom: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
+  line-height: 1;
 }
 
-:where(.pf-theme-dark) .pf-c-chip {
-  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
+:where(.pf-v5-theme-dark) .pf-v5-c-chip {
+  --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);
 }

package/css/components/Chip/chip.d.ts

@@ -1,14 +1,15 @@
 import './chip.css';
 declare const _default: {
-  "badge": "pf-c-badge",
-  "button": "pf-c-button",
-  "chip": "pf-c-chip",
-  "chipIcon": "pf-c-chip__icon",
-  "chipText": "pf-c-chip__text",
+  "button": "pf-v5-c-button",
+  "chip": "pf-v5-c-chip",
+  "chipActions": "pf-v5-c-chip__actions",
+  "chipContent": "pf-v5-c-chip__content",
+  "chipIcon": "pf-v5-c-chip__icon",
+  "chipText": "pf-v5-c-chip__text",
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Chip/chip.js

@@ -2,14 +2,15 @@
 exports.__esModule = true;
 require('./chip.css');
 exports.default = {
-  "badge": "pf-c-badge",
-  "button": "pf-c-button",
-  "chip": "pf-c-chip",
-  "chipIcon": "pf-c-chip__icon",
-  "chipText": "pf-c-chip__text",
+  "button": "pf-v5-c-button",
+  "chip": "pf-v5-c-chip",
+  "chipActions": "pf-v5-c-chip__actions",
+  "chipContent": "pf-v5-c-chip__content",
+  "chipIcon": "pf-v5-c-chip__icon",
+  "chipText": "pf-v5-c-chip__text",
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Chip/chip.mjs

@@ -1,13 +1,14 @@
 import './chip.css';
 export default {
-  "badge": "pf-c-badge",
-  "button": "pf-c-button",
-  "chip": "pf-c-chip",
-  "chipIcon": "pf-c-chip__icon",
-  "chipText": "pf-c-chip__text",
+  "button": "pf-v5-c-button",
+  "chip": "pf-v5-c-chip",
+  "chipActions": "pf-v5-c-chip__actions",
+  "chipContent": "pf-v5-c-chip__content",
+  "chipIcon": "pf-v5-c-chip__icon",
+  "chipText": "pf-v5-c-chip__text",
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -1,100 +1,100 @@
-.pf-c-clipboard-copy {
-  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
-  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
-  --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-clipboard-copy--m-inline--PaddingTop: 0;
-  --pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs);
-  --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
-  --pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
-  --pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm);
-}
-.pf-c-clipboard-copy.pf-m-expanded .pf-c-clipboard-copy__toggle-icon {
-  transform: rotate(var(--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
-}
-.pf-c-clipboard-copy.pf-m-inline {
+.pf-v5-c-clipboard-copy {
+  --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-clipboard-copy--m-inline--PaddingTop: 0;
+  --pf-v5-c-clipboard-copy--m-inline--PaddingBottom: 0;
+  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-v5-global--FontFamily--monospace);
+  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
+  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+}
+.pf-v5-c-clipboard-copy.pf-m-expanded .pf-v5-c-clipboard-copy__toggle-icon {
+  transform: rotate(var(--pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
+}
+.pf-v5-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-top: var(--pf-c-clipboard-copy--m-inline--PaddingTop);
-  padding-bottom: var(--pf-c-clipboard-copy--m-inline--PaddingBottom);
-  padding-left: var(--pf-c-clipboard-copy--m-inline--PaddingLeft);
+  padding-top: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
+  padding-bottom: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
+  padding-left: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
   white-space: nowrap;
-  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
+  background-color: var(--pf-v5-c-clipboard-copy--m-inline--BackgroundColor);
 }
-.pf-c-clipboard-copy.pf-m-inline.pf-m-block {
+.pf-v5-c-clipboard-copy.pf-m-inline.pf-m-block {
   display: block;
 }
 
-.pf-c-clipboard-copy__group {
+.pf-v5-c-clipboard-copy__group {
   display: flex;
 }
-.pf-c-clipboard-copy__group > * + * {
+.pf-v5-c-clipboard-copy__group > * + * {
   margin-left: -1px;
 }
 
-.pf-c-clipboard-copy__toggle-icon {
-  transition: var(--pf-c-clipboard-copy__toggle-icon--Transition);
+.pf-v5-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
 }
 
-.pf-c-clipboard-copy__expandable-content {
-  padding: var(--pf-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
+.pf-v5-c-clipboard-copy__expandable-content {
+  padding: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
   word-wrap: break-word;
-  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor);
+  background-color: var(--pf-v5-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
-  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor);
-  border-width: var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth);
-  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
+  border: solid var(--pf-v5-c-clipboard-copy__expandable-content--BorderColor);
+  border-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
+  box-shadow: var(--pf-v5-c-clipboard-copy__expandable-content--BoxShadow);
 }
-.pf-c-clipboard-copy__expandable-content pre {
+.pf-v5-c-clipboard-copy__expandable-content pre {
   white-space: pre-wrap;
 }
 
-.pf-c-clipboard-copy__text {
+.pf-v5-c-clipboard-copy__text {
   word-break: break-word;
   white-space: normal;
 }
-.pf-c-clipboard-copy__text.pf-m-code {
-  font-family: var(--pf-c-clipboard-copy__text--m-code--FontFamily);
-  font-size: var(--pf-c-clipboard-copy__text--m-code--FontSize);
+.pf-v5-c-clipboard-copy__text.pf-m-code {
+  font-family: var(--pf-v5-c-clipboard-copy__text--m-code--FontFamily);
+  font-size: var(--pf-v5-c-clipboard-copy__text--m-code--FontSize);
 }
 
-.pf-c-clipboard-copy__actions {
+.pf-v5-c-clipboard-copy__actions {
   display: inline-flex;
 }
 
-.pf-c-clipboard-copy__actions-item {
-  margin-top: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingTop));
-  margin-bottom: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom));
+.pf-v5-c-clipboard-copy__actions-item {
+  margin-top: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
+  margin-bottom: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
 }
-.pf-c-clipboard-copy__actions-item .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
+.pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
 }
 
-:where(.pf-theme-dark) .pf-c-clipboard-copy {
-  --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
+:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
+  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-theme-dark) .pf-c-clipboard-copy__group > * + * {
+:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
   margin-left: 0;
-  border-left: 1px solid var(--pf-global--palette--black-700) !important;
+  border-left: 1px solid var(--pf-v5-global--palette--black-700) !important;
 }
-:where(.pf-theme-dark) .pf-c-clipboard-copy__expandable-content {
+:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
   border: 0;
 }

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -1,19 +1,19 @@
 import './clipboard-copy.css';
 declare const _default: {
-  "button": "pf-c-button",
-  "clipboardCopy": "pf-c-clipboard-copy",
-  "clipboardCopyActions": "pf-c-clipboard-copy__actions",
-  "clipboardCopyActionsItem": "pf-c-clipboard-copy__actions-item",
-  "clipboardCopyExpandableContent": "pf-c-clipboard-copy__expandable-content",
-  "clipboardCopyGroup": "pf-c-clipboard-copy__group",
-  "clipboardCopyText": "pf-c-clipboard-copy__text",
-  "clipboardCopyToggleIcon": "pf-c-clipboard-copy__toggle-icon",
+  "button": "pf-v5-c-button",
+  "clipboardCopy": "pf-v5-c-clipboard-copy",
+  "clipboardCopyActions": "pf-v5-c-clipboard-copy__actions",
+  "clipboardCopyActionsItem": "pf-v5-c-clipboard-copy__actions-item",
+  "clipboardCopyExpandableContent": "pf-v5-c-clipboard-copy__expandable-content",
+  "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
+  "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
+  "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -2,19 +2,19 @@
 exports.__esModule = true;
 require('./clipboard-copy.css');
 exports.default = {
-  "button": "pf-c-button",
-  "clipboardCopy": "pf-c-clipboard-copy",
-  "clipboardCopyActions": "pf-c-clipboard-copy__actions",
-  "clipboardCopyActionsItem": "pf-c-clipboard-copy__actions-item",
-  "clipboardCopyExpandableContent": "pf-c-clipboard-copy__expandable-content",
-  "clipboardCopyGroup": "pf-c-clipboard-copy__group",
-  "clipboardCopyText": "pf-c-clipboard-copy__text",
-  "clipboardCopyToggleIcon": "pf-c-clipboard-copy__toggle-icon",
+  "button": "pf-v5-c-button",
+  "clipboardCopy": "pf-v5-c-clipboard-copy",
+  "clipboardCopyActions": "pf-v5-c-clipboard-copy__actions",
+  "clipboardCopyActionsItem": "pf-v5-c-clipboard-copy__actions-item",
+  "clipboardCopyExpandableContent": "pf-v5-c-clipboard-copy__expandable-content",
+  "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
+  "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
+  "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -1,18 +1,18 @@
 import './clipboard-copy.css';
 export default {
-  "button": "pf-c-button",
-  "clipboardCopy": "pf-c-clipboard-copy",
-  "clipboardCopyActions": "pf-c-clipboard-copy__actions",
-  "clipboardCopyActionsItem": "pf-c-clipboard-copy__actions-item",
-  "clipboardCopyExpandableContent": "pf-c-clipboard-copy__expandable-content",
-  "clipboardCopyGroup": "pf-c-clipboard-copy__group",
-  "clipboardCopyText": "pf-c-clipboard-copy__text",
-  "clipboardCopyToggleIcon": "pf-c-clipboard-copy__toggle-icon",
+  "button": "pf-v5-c-button",
+  "clipboardCopy": "pf-v5-c-clipboard-copy",
+  "clipboardCopyActions": "pf-v5-c-clipboard-copy__actions",
+  "clipboardCopyActionsItem": "pf-v5-c-clipboard-copy__actions-item",
+  "clipboardCopyExpandableContent": "pf-v5-c-clipboard-copy__expandable-content",
+  "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
+  "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
+  "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-theme-dark"
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/CodeBlock/code-block.css

@@ -1,37 +1,37 @@
-.pf-c-code-block {
-  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
-  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
-  background-color: var(--pf-c-code-block--BackgroundColor);
+.pf-v5-c-code-block {
+  --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
+  --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
+  background-color: var(--pf-v5-c-code-block--BackgroundColor);
 }
 
-.pf-c-code-block__header {
+.pf-v5-c-code-block__header {
   display: flex;
-  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
+  border-bottom: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 
-.pf-c-code-block__actions {
+.pf-v5-c-code-block__actions {
   display: flex;
   margin-left: auto;
 }
 
-.pf-c-code-block__content {
-  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
+.pf-v5-c-code-block__content {
+  padding: var(--pf-v5-c-code-block__content--PaddingTop) var(--pf-v5-c-code-block__content--PaddingRight) var(--pf-v5-c-code-block__content--PaddingBottom) var(--pf-v5-c-code-block__content--PaddingLeft);
 }
 
-.pf-c-code-block__pre {
-  font-family: var(--pf-c-code-block__pre--FontFamily);
-  font-size: var(--pf-c-code-block__pre--FontSize);
+.pf-v5-c-code-block__pre {
+  font-family: var(--pf-v5-c-code-block__pre--FontFamily);
+  font-size: var(--pf-v5-c-code-block__pre--FontSize);
   overflow-wrap: break-word;
   white-space: pre-wrap;
 }
 
-.pf-c-code-block__code {
-  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
+.pf-v5-c-code-block__code {
+  font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
 }

package/css/components/CodeBlock/code-block.d.ts

@@ -1,10 +1,10 @@
 import './code-block.css';
 declare const _default: {
-  "codeBlock": "pf-c-code-block",
-  "codeBlockActions": "pf-c-code-block__actions",
-  "codeBlockCode": "pf-c-code-block__code",
-  "codeBlockContent": "pf-c-code-block__content",
-  "codeBlockHeader": "pf-c-code-block__header",
-  "codeBlockPre": "pf-c-code-block__pre"
+  "codeBlock": "pf-v5-c-code-block",
+  "codeBlockActions": "pf-v5-c-code-block__actions",
+  "codeBlockCode": "pf-v5-c-code-block__code",
+  "codeBlockContent": "pf-v5-c-code-block__content",
+  "codeBlockHeader": "pf-v5-c-code-block__header",
+  "codeBlockPre": "pf-v5-c-code-block__pre"
 };
 export default _default;

package/css/components/CodeBlock/code-block.js

@@ -2,10 +2,10 @@
 exports.__esModule = true;
 require('./code-block.css');
 exports.default = {
-  "codeBlock": "pf-c-code-block",
-  "codeBlockActions": "pf-c-code-block__actions",
-  "codeBlockCode": "pf-c-code-block__code",
-  "codeBlockContent": "pf-c-code-block__content",
-  "codeBlockHeader": "pf-c-code-block__header",
-  "codeBlockPre": "pf-c-code-block__pre"
+  "codeBlock": "pf-v5-c-code-block",
+  "codeBlockActions": "pf-v5-c-code-block__actions",
+  "codeBlockCode": "pf-v5-c-code-block__code",
+  "codeBlockContent": "pf-v5-c-code-block__content",
+  "codeBlockHeader": "pf-v5-c-code-block__header",
+  "codeBlockPre": "pf-v5-c-code-block__pre"
 };

package/css/components/CodeBlock/code-block.mjs

@@ -1,9 +1,9 @@
 import './code-block.css';
 export default {
-  "codeBlock": "pf-c-code-block",
-  "codeBlockActions": "pf-c-code-block__actions",
-  "codeBlockCode": "pf-c-code-block__code",
-  "codeBlockContent": "pf-c-code-block__content",
-  "codeBlockHeader": "pf-c-code-block__header",
-  "codeBlockPre": "pf-c-code-block__pre"
+  "codeBlock": "pf-v5-c-code-block",
+  "codeBlockActions": "pf-v5-c-code-block__actions",
+  "codeBlockCode": "pf-v5-c-code-block__code",
+  "codeBlockContent": "pf-v5-c-code-block__content",
+  "codeBlockHeader": "pf-v5-c-code-block__header",
+  "codeBlockPre": "pf-v5-c-code-block__pre"
 };