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

package/css/components/Card/card.d.ts

@@ -1,20 +1,27 @@
 import './card.css';
 declare const _default: {
-  "card": "pf-c-card",
-  "cardActions": "pf-c-card__actions",
-  "cardBody": "pf-c-card__body",
-  "cardExpandableContent": "pf-c-card__expandable-content",
-  "cardFooter": "pf-c-card__footer",
-  "cardHeader": "pf-c-card__header",
-  "cardHeaderToggle": "pf-c-card__header-toggle",
-  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
-  "cardSrInput": "pf-c-card__sr-input",
-  "cardTitle": "pf-c-card__title",
-  "divider": "pf-c-divider",
+  "card": "pf-v5-c-card",
+  "cardActions": "pf-v5-c-card__actions",
+  "cardBody": "pf-v5-c-card__body",
+  "cardExpandableContent": "pf-v5-c-card__expandable-content",
+  "cardFooter": "pf-v5-c-card__footer",
+  "cardHeader": "pf-v5-c-card__header",
+  "cardHeaderMain": "pf-v5-c-card__header-main",
+  "cardHeaderToggle": "pf-v5-c-card__header-toggle",
+  "cardHeaderToggleIcon": "pf-v5-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-v5-c-card__selectable-actions",
+  "cardSrInput": "pf-v5-c-card__sr-input",
+  "cardTitle": "pf-v5-c-card__title",
+  "cardTitleText": "pf-v5-c-card__title-text",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "divider": "pf-v5-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -30,6 +37,8 @@ declare const _default: {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
-  "themeDark": "pf-theme-dark"
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Card/card.js

@@ -2,21 +2,28 @@
 exports.__esModule = true;
 require('./card.css');
 exports.default = {
-  "card": "pf-c-card",
-  "cardActions": "pf-c-card__actions",
-  "cardBody": "pf-c-card__body",
-  "cardExpandableContent": "pf-c-card__expandable-content",
-  "cardFooter": "pf-c-card__footer",
-  "cardHeader": "pf-c-card__header",
-  "cardHeaderToggle": "pf-c-card__header-toggle",
-  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
-  "cardSrInput": "pf-c-card__sr-input",
-  "cardTitle": "pf-c-card__title",
-  "divider": "pf-c-divider",
+  "card": "pf-v5-c-card",
+  "cardActions": "pf-v5-c-card__actions",
+  "cardBody": "pf-v5-c-card__body",
+  "cardExpandableContent": "pf-v5-c-card__expandable-content",
+  "cardFooter": "pf-v5-c-card__footer",
+  "cardHeader": "pf-v5-c-card__header",
+  "cardHeaderMain": "pf-v5-c-card__header-main",
+  "cardHeaderToggle": "pf-v5-c-card__header-toggle",
+  "cardHeaderToggleIcon": "pf-v5-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-v5-c-card__selectable-actions",
+  "cardSrInput": "pf-v5-c-card__sr-input",
+  "cardTitle": "pf-v5-c-card__title",
+  "cardTitleText": "pf-v5-c-card__title-text",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "divider": "pf-v5-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -32,5 +39,7 @@ exports.default = {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
-  "themeDark": "pf-theme-dark"
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Card/card.mjs

@@ -1,20 +1,27 @@
 import './card.css';
 export default {
-  "card": "pf-c-card",
-  "cardActions": "pf-c-card__actions",
-  "cardBody": "pf-c-card__body",
-  "cardExpandableContent": "pf-c-card__expandable-content",
-  "cardFooter": "pf-c-card__footer",
-  "cardHeader": "pf-c-card__header",
-  "cardHeaderToggle": "pf-c-card__header-toggle",
-  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
-  "cardSrInput": "pf-c-card__sr-input",
-  "cardTitle": "pf-c-card__title",
-  "divider": "pf-c-divider",
+  "card": "pf-v5-c-card",
+  "cardActions": "pf-v5-c-card__actions",
+  "cardBody": "pf-v5-c-card__body",
+  "cardExpandableContent": "pf-v5-c-card__expandable-content",
+  "cardFooter": "pf-v5-c-card__footer",
+  "cardHeader": "pf-v5-c-card__header",
+  "cardHeaderMain": "pf-v5-c-card__header-main",
+  "cardHeaderToggle": "pf-v5-c-card__header-toggle",
+  "cardHeaderToggleIcon": "pf-v5-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-v5-c-card__selectable-actions",
+  "cardSrInput": "pf-v5-c-card__sr-input",
+  "cardTitle": "pf-v5-c-card__title",
+  "cardTitleText": "pf-v5-c-card__title-text",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "divider": "pf-v5-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -30,5 +37,7 @@ export default {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
-  "themeDark": "pf-theme-dark"
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Check/check.css

@@ -1,71 +1,71 @@
-.pf-c-check {
-  --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
-  --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
-  --pf-c-check__label--Color: var(--pf-global--Color--100);
-  --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
-  --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
-  --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-check__description--Color: var(--pf-global--Color--200);
-  --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
+.pf-v5-c-check {
+  --pf-v5-c-check--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-check__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
+  --pf-v5-c-check__input--Height: var(--pf-v5-c-check__label--FontSize);
+  --pf-v5-c-check__input--MarginTop: calc(((var(--pf-v5-c-check__label--FontSize) * var(--pf-v5-c-check__label--LineHeight)) - var(--pf-v5-c-check__input--Height)) / 2);
+  --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-check__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-check__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-check__label-required--Color: var(--pf-v5-global--danger-color--100);
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-c-check--GridGap);
+  grid-gap: var(--pf-v5-c-check--GridGap);
 }
-.pf-c-check.pf-m-standalone {
-  --pf-c-check--GridGap: 0;
-  --pf-c-check__input--Height: auto;
-  --pf-c-check__input--MarginTop: 0;
+.pf-v5-c-check.pf-m-standalone {
+  --pf-v5-c-check--GridGap: 0;
+  --pf-v5-c-check__input--Height: auto;
+  --pf-v5-c-check__input--MarginTop: 0;
   display: inline-grid;
   line-height: 1;
 }
 
-.pf-c-check__label {
-  font-size: var(--pf-c-check__label--FontSize);
-  font-weight: var(--pf-c-check__label--FontWeight);
-  line-height: var(--pf-c-check__label--LineHeight);
-  color: var(--pf-c-check__label--Color);
+.pf-v5-c-check__label {
+  font-size: var(--pf-v5-c-check__label--FontSize);
+  font-weight: var(--pf-v5-c-check__label--FontWeight);
+  line-height: var(--pf-v5-c-check__label--LineHeight);
+  color: var(--pf-v5-c-check__label--Color);
 }
 
-.pf-c-check__input {
-  height: var(--pf-c-check__input--Height);
-  margin-top: var(--pf-c-check__input--MarginTop);
+.pf-v5-c-check__input {
+  height: var(--pf-v5-c-check__input--Height);
+  margin-top: var(--pf-v5-c-check__input--MarginTop);
 }
 
-.pf-c-check__description {
+.pf-v5-c-check__description {
   grid-column: 2;
-  font-size: var(--pf-c-check__description--FontSize);
-  color: var(--pf-c-check__description--Color);
+  font-size: var(--pf-v5-c-check__description--FontSize);
+  color: var(--pf-v5-c-check__description--Color);
 }
 
-.pf-c-check__body {
+.pf-v5-c-check__body {
   grid-column: 2;
-  margin-top: var(--pf-c-check__body--MarginTop);
+  margin-top: var(--pf-v5-c-check__body--MarginTop);
 }
 
-.pf-c-check__label,
-.pf-c-check__input {
+.pf-v5-c-check__label,
+.pf-v5-c-check__input {
   justify-self: start;
 }
-label.pf-c-check, .pf-c-check__label,
-.pf-c-check__input {
+label.pf-v5-c-check, .pf-v5-c-check__label,
+.pf-v5-c-check__input {
   cursor: pointer;
 }
 
-.pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
-.pf-c-check__input:disabled,
-.pf-c-check__input.pf-m-disabled {
-  --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
+.pf-v5-c-check__label:disabled, .pf-v5-c-check__label.pf-m-disabled,
+.pf-v5-c-check__input:disabled,
+.pf-v5-c-check__input.pf-m-disabled {
+  --pf-v5-c-check__label--Color: var(--pf-v5-c-check__label--disabled--Color);
   cursor: not-allowed;
 }
 
-.pf-c-check__label-required {
-  margin-left: var(--pf-c-check__label-required--MarginLeft);
-  font-size: var(--pf-c-check__label-required--FontSize);
-  color: var(--pf-c-check__label-required--Color);
+.pf-v5-c-check__label-required {
+  margin-left: var(--pf-v5-c-check__label-required--MarginLeft);
+  font-size: var(--pf-v5-c-check__label-required--FontSize);
+  color: var(--pf-v5-c-check__label-required--Color);
 }

package/css/components/Check/check.d.ts

@@ -1,11 +1,11 @@
 import './check.css';
 declare const _default: {
-  "check": "pf-c-check",
-  "checkBody": "pf-c-check__body",
-  "checkDescription": "pf-c-check__description",
-  "checkInput": "pf-c-check__input",
-  "checkLabel": "pf-c-check__label",
-  "checkLabelRequired": "pf-c-check__label-required",
+  "check": "pf-v5-c-check",
+  "checkBody": "pf-v5-c-check__body",
+  "checkDescription": "pf-v5-c-check__description",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "checkLabelRequired": "pf-v5-c-check__label-required",
   "modifiers": {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"

package/css/components/Check/check.js

@@ -2,12 +2,12 @@
 exports.__esModule = true;
 require('./check.css');
 exports.default = {
-  "check": "pf-c-check",
-  "checkBody": "pf-c-check__body",
-  "checkDescription": "pf-c-check__description",
-  "checkInput": "pf-c-check__input",
-  "checkLabel": "pf-c-check__label",
-  "checkLabelRequired": "pf-c-check__label-required",
+  "check": "pf-v5-c-check",
+  "checkBody": "pf-v5-c-check__body",
+  "checkDescription": "pf-v5-c-check__description",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "checkLabelRequired": "pf-v5-c-check__label-required",
   "modifiers": {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"

package/css/components/Check/check.mjs

@@ -1,11 +1,11 @@
 import './check.css';
 export default {
-  "check": "pf-c-check",
-  "checkBody": "pf-c-check__body",
-  "checkDescription": "pf-c-check__description",
-  "checkInput": "pf-c-check__input",
-  "checkLabel": "pf-c-check__label",
-  "checkLabelRequired": "pf-c-check__label-required",
+  "check": "pf-v5-c-check",
+  "checkBody": "pf-v5-c-check__body",
+  "checkDescription": "pf-v5-c-check__description",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "checkLabelRequired": "pf-v5-c-check__label-required",
   "modifiers": {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"

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"
 };