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

package/css/components/ProgressStepper/progress-stepper.d.ts

@@ -1,6 +1,7 @@
 import './progress-stepper.css';
 declare const _default: {
   "faExclamationTriangle": "fa-exclamation-triangle",
+  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -24,13 +25,12 @@ declare const _default: {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
-  "pficon": "pficon",
-  "progressStepper": "pf-c-progress-stepper",
-  "progressStepperStep": "pf-c-progress-stepper__step",
-  "progressStepperStepConnector": "pf-c-progress-stepper__step-connector",
-  "progressStepperStepDescription": "pf-c-progress-stepper__step-description",
-  "progressStepperStepIcon": "pf-c-progress-stepper__step-icon",
-  "progressStepperStepMain": "pf-c-progress-stepper__step-main",
-  "progressStepperStepTitle": "pf-c-progress-stepper__step-title"
+  "progressStepper": "pf-v5-c-progress-stepper",
+  "progressStepperStep": "pf-v5-c-progress-stepper__step",
+  "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",
+  "progressStepperStepDescription": "pf-v5-c-progress-stepper__step-description",
+  "progressStepperStepIcon": "pf-v5-c-progress-stepper__step-icon",
+  "progressStepperStepMain": "pf-v5-c-progress-stepper__step-main",
+  "progressStepperStepTitle": "pf-v5-c-progress-stepper__step-title"
 };
 export default _default;

package/css/components/ProgressStepper/progress-stepper.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./progress-stepper.css');
 exports.default = {
   "faExclamationTriangle": "fa-exclamation-triangle",
+  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -26,12 +27,11 @@ exports.default = {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
-  "pficon": "pficon",
-  "progressStepper": "pf-c-progress-stepper",
-  "progressStepperStep": "pf-c-progress-stepper__step",
-  "progressStepperStepConnector": "pf-c-progress-stepper__step-connector",
-  "progressStepperStepDescription": "pf-c-progress-stepper__step-description",
-  "progressStepperStepIcon": "pf-c-progress-stepper__step-icon",
-  "progressStepperStepMain": "pf-c-progress-stepper__step-main",
-  "progressStepperStepTitle": "pf-c-progress-stepper__step-title"
+  "progressStepper": "pf-v5-c-progress-stepper",
+  "progressStepperStep": "pf-v5-c-progress-stepper__step",
+  "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",
+  "progressStepperStepDescription": "pf-v5-c-progress-stepper__step-description",
+  "progressStepperStepIcon": "pf-v5-c-progress-stepper__step-icon",
+  "progressStepperStepMain": "pf-v5-c-progress-stepper__step-main",
+  "progressStepperStepTitle": "pf-v5-c-progress-stepper__step-title"
 };

package/css/components/ProgressStepper/progress-stepper.mjs

@@ -1,6 +1,7 @@
 import './progress-stepper.css';
 export default {
   "faExclamationTriangle": "fa-exclamation-triangle",
+  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -24,12 +25,11 @@ export default {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
-  "pficon": "pficon",
-  "progressStepper": "pf-c-progress-stepper",
-  "progressStepperStep": "pf-c-progress-stepper__step",
-  "progressStepperStepConnector": "pf-c-progress-stepper__step-connector",
-  "progressStepperStepDescription": "pf-c-progress-stepper__step-description",
-  "progressStepperStepIcon": "pf-c-progress-stepper__step-icon",
-  "progressStepperStepMain": "pf-c-progress-stepper__step-main",
-  "progressStepperStepTitle": "pf-c-progress-stepper__step-title"
+  "progressStepper": "pf-v5-c-progress-stepper",
+  "progressStepperStep": "pf-v5-c-progress-stepper__step",
+  "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",
+  "progressStepperStepDescription": "pf-v5-c-progress-stepper__step-description",
+  "progressStepperStepIcon": "pf-v5-c-progress-stepper__step-icon",
+  "progressStepperStepMain": "pf-v5-c-progress-stepper__step-main",
+  "progressStepperStepTitle": "pf-v5-c-progress-stepper__step-title"
 };

package/css/components/Radio/radio.css

@@ -1,68 +1,70 @@
-.pf-c-radio {
-  --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
-  --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
-  --pf-c-radio__label--Color: var(--pf-global--Color--100);
-  --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
-  --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
-  --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
-  --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
-  --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-radio__description--Color: var(--pf-global--Color--200);
-  --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
+.pf-v5-c-radio {
+  --pf-v5-c-radio--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-radio__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
+  --pf-v5-c-radio__input--Height: var(--pf-v5-c-radio__label--FontSize);
+  --pf-v5-c-radio__input--MarginTop: calc(((var(--pf-v5-c-radio__label--FontSize) * var(--pf-v5-c-radio__label--LineHeight)) - var(--pf-v5-c-radio__input--Height)) / 2);
+  --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
+  --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
+  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-c-radio--GridGap);
-  align-items: start;
-  justify-items: start;
+  grid-gap: var(--pf-v5-c-radio--GridGap);
 }
-.pf-c-radio.pf-m-standalone {
-  --pf-c-radio--GridGap: 0;
-  --pf-c-radio__input--Height: auto;
-  --pf-c-radio__input--MarginTop: 0;
+.pf-v5-c-radio.pf-m-standalone {
+  --pf-v5-c-radio--GridGap: 0;
+  --pf-v5-c-radio__input--Height: auto;
+  --pf-v5-c-radio__input--MarginTop: 0;
   display: inline-grid;
   line-height: 1;
 }
 
-.pf-c-radio__label {
-  font-size: var(--pf-c-radio__label--FontSize);
-  font-weight: var(--pf-c-radio__label--FontWeight);
-  line-height: var(--pf-c-radio__label--LineHeight);
-  color: var(--pf-c-radio__label--Color);
+.pf-v5-c-radio__label {
+  font-size: var(--pf-v5-c-radio__label--FontSize);
+  font-weight: var(--pf-v5-c-radio__label--FontWeight);
+  line-height: var(--pf-v5-c-radio__label--LineHeight);
+  color: var(--pf-v5-c-radio__label--Color);
 }
 
-.pf-c-radio__input {
-  height: var(--pf-c-radio__input--Height);
-  margin-top: var(--pf-c-radio__input--MarginTop);
+.pf-v5-c-radio__input {
+  height: var(--pf-v5-c-radio__input--Height);
+  margin-top: var(--pf-v5-c-radio__input--MarginTop);
 }
-.pf-c-radio__input:first-child {
-  margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
+.pf-v5-c-radio__input:first-child {
+  margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);
 }
-.pf-c-radio__input:last-child {
-  margin-right: var(--pf-c-radio__input--last-child--MarginRight);
+.pf-v5-c-radio__input:last-child {
+  margin-right: var(--pf-v5-c-radio__input--last-child--MarginRight);
 }
 
-.pf-c-radio__description {
+.pf-v5-c-radio__description {
   grid-column: 2;
-  font-size: var(--pf-c-radio__description--FontSize);
-  color: var(--pf-c-radio__description--Color);
+  font-size: var(--pf-v5-c-radio__description--FontSize);
+  color: var(--pf-v5-c-radio__description--Color);
 }
 
-.pf-c-radio__body {
+.pf-v5-c-radio__body {
   grid-column: 2;
-  margin-top: var(--pf-c-radio__body--MarginTop);
+  margin-top: var(--pf-v5-c-radio__body--MarginTop);
 }
 
-label.pf-c-radio, .pf-c-radio__label,
-.pf-c-radio__input {
+.pf-v5-c-radio__label,
+.pf-v5-c-radio__input {
+  justify-self: start;
+}
+label.pf-v5-c-radio, .pf-v5-c-radio__label,
+.pf-v5-c-radio__input {
   cursor: pointer;
 }
 
-.pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
-.pf-c-radio__input:disabled,
-.pf-c-radio__input.pf-m-disabled {
-  --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
+.pf-v5-c-radio__label:disabled, .pf-v5-c-radio__label.pf-m-disabled,
+.pf-v5-c-radio__input:disabled,
+.pf-v5-c-radio__input.pf-m-disabled {
+  --pf-v5-c-radio__label--Color: var(--pf-v5-c-radio__label--disabled--Color);
   cursor: not-allowed;
 }

package/css/components/Radio/radio.d.ts

@@ -4,10 +4,10 @@ declare const _default: {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"
   },
-  "radio": "pf-c-radio",
-  "radioBody": "pf-c-radio__body",
-  "radioDescription": "pf-c-radio__description",
-  "radioInput": "pf-c-radio__input",
-  "radioLabel": "pf-c-radio__label"
+  "radio": "pf-v5-c-radio",
+  "radioBody": "pf-v5-c-radio__body",
+  "radioDescription": "pf-v5-c-radio__description",
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label"
 };
 export default _default;

package/css/components/Radio/radio.js

@@ -6,9 +6,9 @@ exports.default = {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"
   },
-  "radio": "pf-c-radio",
-  "radioBody": "pf-c-radio__body",
-  "radioDescription": "pf-c-radio__description",
-  "radioInput": "pf-c-radio__input",
-  "radioLabel": "pf-c-radio__label"
+  "radio": "pf-v5-c-radio",
+  "radioBody": "pf-v5-c-radio__body",
+  "radioDescription": "pf-v5-c-radio__description",
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label"
 };

package/css/components/Radio/radio.mjs

@@ -4,9 +4,9 @@ export default {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"
   },
-  "radio": "pf-c-radio",
-  "radioBody": "pf-c-radio__body",
-  "radioDescription": "pf-c-radio__description",
-  "radioInput": "pf-c-radio__input",
-  "radioLabel": "pf-c-radio__label"
+  "radio": "pf-v5-c-radio",
+  "radioBody": "pf-v5-c-radio__body",
+  "radioDescription": "pf-v5-c-radio__description",
+  "radioInput": "pf-v5-c-radio__input",
+  "radioLabel": "pf-v5-c-radio__label"
 };

package/css/components/SearchInput/search-input.css

@@ -1,66 +1,67 @@
-.pf-c-search-input {
-  --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
-  --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
-  --pf-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
-  --pf-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
-  --pf-c-search-input__text-input--PaddingTop: var(--pf-global--spacer--form-element);
-  --pf-c-search-input__text-input--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-search-input__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
-  --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
-  --pf-c-search-input__text-input--MinWidth: 6ch;
-  --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
-  --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
-  --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
-  --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
-  --pf-c-search-input__icon--TranslateY: -50%;
-  --pf-c-search-input__utilities--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-search-input__utilities--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-search-input__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-search-input__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-search-input__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
-  --pf-c-search-input__menu-body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs));
-  --pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-search-input--m-top__menu--Top: 0;
-  --pf-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
-  --pf-c-search-input__menu-list--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-search-input__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-search-input__menu-item--Color: var(--pf-global--Color--100);
-  --pf-c-search-input__menu-item--BackgroundColor: transparent;
-  --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+.pf-v5-c-search-input {
+  --pf-v5-c-search-input__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-search-input__text--before--BorderColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-search-input__text--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-search-input__text-input--PaddingTop: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-search-input__text-input--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-search-input__text-input--PaddingLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-search-input__text-input--MinWidth: 6ch;
+  --pf-v5-c-search-input__text-input--m-hint--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-search-input__text-input--BackgroundColor: transparent;
+  --pf-v5-c-search-input__icon--Left: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-search-input__text--hover__icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-search-input__icon--TranslateY: -50%;
+  --pf-v5-c-search-input__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-search-input__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-search-input__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-search-input__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-search-input__menu-body--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu-body--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu-body--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu-body--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-c-search-input__menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-search-input__menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-search-input__menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
+  --pf-v5-c-search-input--m-top__menu--Top: 0;
+  --pf-v5-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-search-input__menu-list--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__menu-list--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__menu-item--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__menu-item--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu-item--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-search-input__menu-item--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-search-input__menu-item--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-search-input__menu-item--BackgroundColor: transparent;
+  --pf-v5-c-search-input__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-search-input__menu-item--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   position: relative;
   width: 100%;
 }
 
-.pf-c-search-input__bar {
+.pf-v5-c-search-input__bar {
   position: relative;
   display: flex;
   width: 100%;
 }
-.pf-c-search-input__bar:hover {
-  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__bar--hover__text--after--BorderBottomColor);
+.pf-v5-c-search-input__bar:hover {
+  --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-c-search-input__bar--hover__text--after--BorderBottomColor);
 }
 
-.pf-c-search-input__text {
+.pf-v5-c-search-input__text {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
-.pf-c-search-input__text::before, .pf-c-search-input__text::after {
+.pf-v5-c-search-input__text::before, .pf-v5-c-search-input__text::after {
   position: absolute;
   top: 0;
   right: 0;
@@ -69,82 +70,83 @@
   pointer-events: none;
   content: "";
 }
-.pf-c-search-input__text::before {
-  border: var(--pf-c-search-input__text--before--BorderWidth) solid var(--pf-c-search-input__text--before--BorderColor);
+.pf-v5-c-search-input__text::before {
+  border: var(--pf-v5-c-search-input__text--before--BorderWidth) solid var(--pf-v5-c-search-input__text--before--BorderColor);
 }
-.pf-c-search-input__text::after {
-  border-bottom: var(--pf-c-search-input__text--after--BorderBottomWidth) solid var(--pf-c-search-input__text--after--BorderBottomColor);
+.pf-v5-c-search-input__text::after {
+  border-bottom: var(--pf-v5-c-search-input__text--after--BorderBottomWidth) solid var(--pf-v5-c-search-input__text--after--BorderBottomColor);
 }
-.pf-c-search-input__text:hover, .pf-c-search-input__text:focus-within {
-  --pf-c-search-input__icon--Color: var(--pf-c-search-input__text--hover__icon--Color);
+.pf-v5-c-search-input__text:hover, .pf-v5-c-search-input__text:focus-within {
+  --pf-v5-c-search-input__icon--Color: var(--pf-v5-c-search-input__text--hover__icon--Color);
 }
-.pf-c-search-input__text:focus-within {
-  --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-c-search-input__text--focus-within--after--BorderBottomWidth);
-  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__text--focus-within--after--BorderBottomColor);
+.pf-v5-c-search-input__text:focus-within {
+  --pf-v5-c-search-input__text--after--BorderBottomWidth: var(--pf-v5-c-search-input__text--focus-within--after--BorderBottomWidth);
+  --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-c-search-input__text--focus-within--after--BorderBottomColor);
 }
 
-.pf-c-search-input__icon {
+.pf-v5-c-search-input__icon {
   position: absolute;
   top: 50%;
-  left: var(--pf-c-search-input__icon--Left);
-  color: var(--pf-c-search-input__icon--Color);
-  transform: translateY(var(--pf-c-search-input__icon--TranslateY));
+  left: var(--pf-v5-c-search-input__icon--Left);
+  color: var(--pf-v5-c-search-input__icon--Color);
+  transform: translateY(var(--pf-v5-c-search-input__icon--TranslateY));
 }
 
-.pf-c-search-input__text-input {
+.pf-v5-c-search-input__text-input {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
   width: 100%;
-  min-width: var(--pf-c-search-input__text-input--MinWidth);
-  padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
+  min-width: var(--pf-v5-c-search-input__text-input--MinWidth);
+  padding: var(--pf-v5-c-search-input__text-input--PaddingTop) var(--pf-v5-c-search-input__text-input--PaddingRight) var(--pf-v5-c-search-input__text-input--PaddingBottom) var(--pf-v5-c-search-input__text-input--PaddingLeft);
+  background-color: var(--pf-v5-c-search-input__text-input--BackgroundColor);
   border: 0;
 }
-.pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
+.pf-v5-c-search-input__text-input, .pf-v5-c-search-input__text-input.pf-m-hint {
   grid-area: text-input;
 }
-.pf-c-search-input__text-input.pf-m-hint {
-  color: var(--pf-c-search-input__text-input--m-hint--Color);
+.pf-v5-c-search-input__text-input.pf-m-hint {
+  color: var(--pf-v5-c-search-input__text-input--m-hint--Color);
 }
 
-.pf-c-search-input__utilities {
+.pf-v5-c-search-input__utilities {
   display: flex;
-  margin-right: var(--pf-c-search-input__utilities--MarginRight);
-  margin-left: var(--pf-c-search-input__utilities--MarginLeft);
+  margin-right: var(--pf-v5-c-search-input__utilities--MarginRight);
+  margin-left: var(--pf-v5-c-search-input__utilities--MarginLeft);
 }
-.pf-c-search-input__utilities > * + * {
-  margin-left: var(--pf-c-search-input__utilities--child--MarginLeft);
+.pf-v5-c-search-input__utilities > * + * {
+  margin-left: var(--pf-v5-c-search-input__utilities--child--MarginLeft);
 }
-.pf-c-search-input__utilities .pf-c-button {
-  --pf-c-button--PaddingRight: var(--pf-c-search-input__utilities--c-button--PaddingRight);
-  --pf-c-button--PaddingLeft: var(--pf-c-search-input__utilities--c-button--PaddingLeft);
+.pf-v5-c-search-input__utilities .pf-v5-c-button {
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-search-input__utilities--c-button--PaddingRight);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-search-input__utilities--c-button--PaddingLeft);
 }
 
-.pf-c-search-input__nav {
+.pf-v5-c-search-input__nav {
   display: flex;
 }
 
-.pf-c-search-input__count {
+.pf-v5-c-search-input__count {
   display: flex;
   align-items: center;
 }
 
-.pf-c-search-input__menu {
+.pf-v5-c-search-input__menu {
   position: absolute;
-  top: var(--pf-c-search-input__menu--Top);
-  z-index: var(--pf-c-search-input__menu--ZIndex);
+  top: var(--pf-v5-c-search-input__menu--Top);
+  z-index: var(--pf-v5-c-search-input__menu--ZIndex);
   min-width: 100%;
-  background-color: var(--pf-c-search-input__menu--BackgroundColor);
+  background-color: var(--pf-v5-c-search-input__menu--BackgroundColor);
   background-clip: padding-box;
-  box-shadow: var(--pf-c-search-input__menu--BoxShadow);
+  box-shadow: var(--pf-v5-c-search-input__menu--BoxShadow);
 }
-.pf-c-search-input.pf-m-top .pf-c-search-input__menu {
-  --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
-  transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
+.pf-v5-c-search-input.pf-m-top .pf-v5-c-search-input__menu {
+  --pf-v5-c-search-input__menu--Top: var(--pf-v5-c-search-input--m-top__menu--Top);
+  transform: translateY(var(--pf-v5-c-search-input--m-top__menu--TranslateY));
 }
-.pf-c-search-input__menu.pf-m-static {
-  --pf-c-search-input--m-top__menu--TranslateY: 0;
+.pf-v5-c-search-input__menu.pf-m-static {
+  --pf-v5-c-search-input--m-top__menu--TranslateY: 0;
   position: static;
   top: auto;
   right: auto;
@@ -154,44 +156,44 @@
   min-width: min-content;
 }
 
-.pf-c-search-input__menu-body {
-  padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
+.pf-v5-c-search-input__menu-body {
+  padding: var(--pf-v5-c-search-input__menu-body--PaddingTop) var(--pf-v5-c-search-input__menu-body--PaddingRight) var(--pf-v5-c-search-input__menu-body--PaddingBottom) var(--pf-v5-c-search-input__menu-body--PaddingLeft);
 }
 
-.pf-c-search-input__menu-list {
-  padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
-  padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
+.pf-v5-c-search-input__menu-list {
+  padding-top: var(--pf-v5-c-search-input__menu-list--PaddingTop);
+  padding-bottom: var(--pf-v5-c-search-input__menu-list--PaddingBottom);
 }
 
-.pf-c-search-input__menu-item {
+.pf-v5-c-search-input__menu-item {
   display: flex;
   width: 100%;
   min-width: 0;
-  padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
-  padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
-  padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
-  padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
-  color: var(--pf-c-search-input__menu-item--Color);
+  padding-top: var(--pf-v5-c-search-input__menu-item--PaddingTop);
+  padding-right: var(--pf-v5-c-search-input__menu-item--PaddingRight);
+  padding-bottom: var(--pf-v5-c-search-input__menu-item--PaddingBottom);
+  padding-left: var(--pf-v5-c-search-input__menu-item--PaddingLeft);
+  color: var(--pf-v5-c-search-input__menu-item--Color);
   text-align: left;
-  background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
+  background-color: var(--pf-v5-c-search-input__menu-item--BackgroundColor);
   border: none;
 }
-.pf-c-search-input__menu-item:hover {
-  --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
+.pf-v5-c-search-input__menu-item:hover {
+  --pf-v5-c-search-input__menu-item--BackgroundColor: var(--pf-v5-c-search-input__menu-item--hover--BackgroundColor);
 }
-.pf-c-search-input__menu-item:focus {
-  --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
+.pf-v5-c-search-input__menu-item:focus {
+  --pf-v5-c-search-input__menu-item--BackgroundColor: var(--pf-v5-c-search-input__menu-item--focus--BackgroundColor);
 }
 
-.pf-c-search-input__menu-item-text {
+.pf-v5-c-search-input__menu-item-text {
   flex-grow: 1;
 }
 
-:where(.pf-theme-dark) .pf-c-search-input {
-  --pf-c-search-input__text--before--BorderColor: transparent;
-  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
-  background-color: var(--pf-global--BackgroundColor--400);
+:where(.pf-v5-theme-dark) .pf-v5-c-search-input {
+  --pf-v5-c-search-input__text--before--BorderColor: transparent;
+  --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
+  background-color: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-theme-dark) .pf-c-search-input__text::before {
-  border-bottom-color: var(--pf-global--BorderColor--400);
+:where(.pf-v5-theme-dark) .pf-v5-c-search-input__text::before {
+  border-bottom-color: var(--pf-v5-global--BorderColor--400);
 }

package/css/components/SearchInput/search-input.d.ts

@@ -1,24 +1,24 @@
 import './search-input.css';
 declare const _default: {
-  "button": "pf-c-button",
+  "button": "pf-v5-c-button",
   "modifiers": {
     "hint": "pf-m-hint",
     "top": "pf-m-top",
     "static": "pf-m-static"
   },
-  "searchInput": "pf-c-search-input",
-  "searchInputBar": "pf-c-search-input__bar",
-  "searchInputCount": "pf-c-search-input__count",
-  "searchInputIcon": "pf-c-search-input__icon",
-  "searchInputMenu": "pf-c-search-input__menu",
-  "searchInputMenuBody": "pf-c-search-input__menu-body",
-  "searchInputMenuItem": "pf-c-search-input__menu-item",
-  "searchInputMenuItemText": "pf-c-search-input__menu-item-text",
-  "searchInputMenuList": "pf-c-search-input__menu-list",
-  "searchInputNav": "pf-c-search-input__nav",
-  "searchInputText": "pf-c-search-input__text",
-  "searchInputTextInput": "pf-c-search-input__text-input",
-  "searchInputUtilities": "pf-c-search-input__utilities",
-  "themeDark": "pf-theme-dark"
+  "searchInput": "pf-v5-c-search-input",
+  "searchInputBar": "pf-v5-c-search-input__bar",
+  "searchInputCount": "pf-v5-c-search-input__count",
+  "searchInputIcon": "pf-v5-c-search-input__icon",
+  "searchInputMenu": "pf-v5-c-search-input__menu",
+  "searchInputMenuBody": "pf-v5-c-search-input__menu-body",
+  "searchInputMenuItem": "pf-v5-c-search-input__menu-item",
+  "searchInputMenuItemText": "pf-v5-c-search-input__menu-item-text",
+  "searchInputMenuList": "pf-v5-c-search-input__menu-list",
+  "searchInputNav": "pf-v5-c-search-input__nav",
+  "searchInputText": "pf-v5-c-search-input__text",
+  "searchInputTextInput": "pf-v5-c-search-input__text-input",
+  "searchInputUtilities": "pf-v5-c-search-input__utilities",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;